Kako nadograditi na React Router 4

Nedugo nakon što sam počeo raditi na svojoj trenutnoj poziciji, tim je shvatio da bi bilo potrebno da se nadogradimo na React 16 kako bismo mogli koristiti novu UI biblioteku koju smo željeli usvojiti.

Da bismo shvatili koliko će vremena zahtijevati ova nadogradnja, pregledali smo sve naše trenutne pakete kako bismo provjerili jesu li kompatibilni s Reactom 16 i je li i dalje koristilo nepodržane ili zastarjele pakete.

Početke naše baze koda izgradili su programeri koji su koristili bilo koju biblioteku otvorenog koda ili treće strane, a da ih zapravo nisu provjerili. Stoga smo otkrili da su mnogi paketi zastarjeli i trebalo ih je zamijeniti što prije.

Jedno od najvećih iznenađenja za nas bilo je ukidanje react-router-redux. Koristili smo react-router-reduxzajedno s reaktorom usmjerivačem v3. To nas je navelo na kritičko razmišljanje o tome zašto smo uopće koristili reduxnaš usmjerivač.

Jednom kada smo započeli s ispitivanjem reakcijskog usmjerivača v4, shvatili smo da će nove značajke u velikoj mjeri eliminirati svaki razlog da koristimo dodatnu knjižnicu za povezivanje usmjerivača i redux. Dakle, to nas je ostavilo u mogućnosti da samo nadogradimo s usmjerivača za reakcije 3 na 4 i uklonimo   react-router-reduxiz naše aplikacije.

Tako sam dobio zadatak nadograditi naš usmjerivač na v4 nakon što sam bio u položaju i radio s Reactom oko 2 mjeseca. To je bilo zato što je nadogradnja s React Routera 3 na React Router 4 zvučala kao da bi to trebao biti trivijalan pothvat. Ali, kako sam brzo saznao, bilo je malo više uključeno nego što sam očekivao.

Pregledavajući dokumentaciju, GitHub repo i mnoge, mnoge odgovore na Stack Overflow, napokon sam sastavio korake za nadogradnju i želio podijeliti svoja otkrića - posebno kako bih objasnio kako i zašto se uvode određene promjene.

Najveća promjena koju su primijetili tvorci React Routera je da je nadogradnja s React Routera 3 na React Router 4 više od pukog ažuriranja nekoliko knjižnica i značajki - omogućuje vam suštinsku promjenu načina rada vašeg usmjerivača. Stvoritelji React Routera htjeli su se vratiti jednostavnom usmjerivaču, omogućujući programeru da ga prilagodi kako god želi.

Podijelio sam ovaj vodič na 5 različitih dijelova:

  1. Paket
  2. Povijest
  3. Ruta
  4. Rekviziti
  5. Redux integracija

Paket

Struktura paketa React Router v4 promijenjena je tako da više nije potrebno instalirati reakcijski usmjerivač - morate instalirati react-router-dom(i deinstalirati react-router), ali ne gubite ništa jer ponovno izvozi sav react-routerizvoz. To znači da također morate ažurirati sve   react-routerizjave o uvozu u react-router-dom.

Povijest

Povijest je važan dio usmjeravanja, što nam omogućuje da se sjetimo odakle smo i gdje smo trenutno. Povijest postoji u različitim oblicima za usmjerivače reakcija, a objašnjenju bi moglo trebati neko vrijeme. Dakle, da biste zadržali ovaj članak na samoj temi, jednostavno ću vam preporučiti da pročitate ovaj članak koji objašnjava povijest u odnosu na reakcijski usmjerivač 4. Ovaj bi članak trebao pokrivati ​​većinu slučajeva vašeg korištenja povijesti.

Ruta

React Router v3 nam je omogućio da smjestimo sve naše rute aplikacija u jednu datoteku, koju ćemo nazvati router.js. Međutim, React Router v4 omogućuje vam smještanje ruta u komponente koje prikazuju. Ideja je ovdje dinamički usmjeravati aplikaciju - drugim riječima, usmjeravanje se odvija dok se aplikacija generira.

Međutim, ako imate bazu naslijeđenih kodova pristojne veličine s kojom radite, vjerojatno nećete napraviti veliku promjenu. Srećom, React Router v4 i dalje vam omogućuje da sve rute smjestite u središnju datoteku, što je način na koji ću stvoriti sve naše primjere. Međutim, postoji nekoliko starijih komponenata i značajki koje će trebati zamijeniti.

IndexRoute

Prije   IndexRoutese koristio kao ruta za neki zadani UI nadređene rute. No, u v4 IndexRoutese više ne koristi, jer je ova funkcionalnost sada dostupna u ruti.

Za pružanje zadanog korisničkog sučelja, više ruta koje imaju istu stazu omogućit će da se prikažu sve pridružene komponente:

import { BrowserRouter as Router, Route } from 'react-router-dom';  // example of our route components    

Dakle, sve komponente - Home, Abouti Contact- učiniti će. Zbog toga više ne možete ugnijezditi ni Rute.

Uz to, da biste omogućili bolje podudaranje bez upotrebe IndexRoute, možete upotrijebiti točnu ključnu riječ.

import { BrowserRouter as Router, Route } from 'react-router-dom';  // example of our route components   

Ekskluzivno usmjeravanje

Nakon dodavanja točne ključne riječi, “something.com/about”preusmjerit će se na to kada usmjerivač vidi put “/about”. Ali što ako imate drugi put “/about/team”,? Kao što sam već rekao, usmjerivač će prikazati sve što se podudara. Dakle, komponente povezane s obje “/about”i   “/about/team”prikazat će se. Ako ste to namjeravali, onda je to sjajno! Međutim, ako to nije ono što želite, možda ćete morati postaviti Switch oko ove grupe ruta. To će omogućiti prikaz prve putanje koja se podudara s URL-om.

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';       

Imajte na umu da se ključna riječ još uvijek mora pojaviti za komponentu Početna - inače bi se podudarala za sljedeće rute. Također imajte na umu da smo na popis “/about/team”prije “/about”tako da put ide na Teamkomponente, umjesto Aboutkomponente kad se vidi   “something.com/about/team”. Kad bi vidio “/about”prvo, zaustavio bi se tamo i prikazao Aboutkomponentu jer Switch prikazuje samo prvu komponentu koja se podudara.

Zadana ruta

Zadana ruta ili "catch all" ruta, koja se obično koristi za 404 stranice, je ruta koju koristite kada se nijedna ruta ne podudara.

U React Routeru v3 zadana vrijednost Routebila je:

U React Routeru v4 zadano Routeje promijenjeno u:

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';       // this is our default route  

When  you don’t include a path in a Route, the component will always render.  So, as we discussed above, we can use Switch to get only one component  to render, and then place the “catch all” route very last (so it doesn’t  use that one before the Router gets a chance to check the rest of the  paths), so something will always render even if the other paths don’t  match.

onEnter

Previously,  you could use onEnter to make sure the component of the Route has all  of the information it needs or as a check (such as to make sure the user  is authenticated) before the component rendered.

This  feature has been deprecated because the new structure of Routes is that  they should act like components, so you should take advantage of component lifecycle methods instead.

In React Router v3:

Becomes:

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';        
... componentDidMount() { this.props.fetchInfo(); } ...

Props

In  React Router v4, the props passed through the router have changed, as  did the way they are accessed. The Route now passes three props:

  • history
  • location
  • match

history

history contains a lot of other properties and methods, so I won’t list all of  them, but here is a selection that might be most commonly used:

  • length: number of entries in the history stack
  • location: contains the same information as below
  • push(path, [state]): pushes new entry on history stack
  • goBack(): allows you to move the pointer on the history stack back 1 entry

It’s  important to note that history is mutable, and while it contains a location property, this instance of location shouldn’t be used since it  could have been changed. Instead, you want to use the actual location prop discussed below.

location

The location has properties:

  • pathname
  • search
  • hash
  • state

location.search is used to replace location.query and it must be parsed. I used  URLSearchParams to parse it. So a URL such as  “//something.com/about?string=’hello’” would be parsed as such:

... const query = new URLSearchParams(this.props.location.search) const string = query.get('string') // string = 'hello' ...

Additionally,  the state property can be used to pass the location-specific state of components through props. So, if you wanted to pass some information  from one component to another, you could use it like this:

... // To link to another component, we could do this:  // However, if we wanted to add state to the location, we could do this: const location = { pathname: '/path/', state: { fromDashboard: true }, }  ...

So, once we get to the component rendered by that path, we’ll have access to fromDashboard from location.state.fromDashboard.

match

match has the following properties:

  • params:  gets the dynamic segments of the path from the URL — for example if the  path is “/about/:id”, in the component, accessing  this.props.match.params will give you the id in the URL
  • isExact: true if the entire URL was matched
  • path: the path in the routes that was matched
  • url: the matched portion of the URL

Redux Integration

As  I addressed earlier, we found that in our case, we didn’t need to have an additional library to connect redux with our router, especially since our main use case for this — Blocked Updates — was covered by react  router.

Blocked Updates

In  some cases, the app doesn’t update when the location changes. This is called a “Blocked Update”. This can happen if both of these conditions  are met:

  1. The component is connected to Redux via connect()(Component).
  2. The component isn’t rendered by a

In these cases, I wrapped the component’s connect with withRouter.

This  allowed the router information to follow the component when it gets linked to, so the app still updates when the Redux state changes.

And that’s it!

This upgrade took me over a week — a few days of trying to figure out how to do it at all, and then another few days to start actually making changes. Upgrading to React Router 4 is a huge change not to be taken lightly, but it’ll make your router a lot more lightweight and easy to use.

Please don’t hesitate to comment/ask questions!