Hogyan lehet frissíteni a React Router 4-re

Nem sokkal azután, hogy a jelenlegi pozíciómnál kezdtem dolgozni, a csapat rájött, hogy szükségünk lesz a React 16-ra történő frissítésre, hogy új felhasználói felületet használhassunk, amelyet szívesen elfogadunk.

Hogy kitaláljuk, mennyi időre van szükség a frissítéshez, megnéztük az összes jelenlegi csomagunkat, hogy azok kompatibilisek-e a React 16-tal, és hogy még mindig nem támogatott vagy elavult csomagokat használunk-e.

A kódbázisunk kezdeteit olyan fejlesztők építették, akik bármilyen nyílt forráskódú vagy harmadik fél könyvtárat használtak, anélkül, hogy valóban ellenőrizték volna őket. Így azt tapasztaltuk, hogy sok csomag elavult, és ASAP cserére szorul.

Az egyik legnagyobb meglepetés számunkra a react-router-redux. A react-router-reduxv3 reakt-routerrel együtt használtuk. Ez arra késztetett bennünket, hogy kritikusan gondolkodjunk azon, hogy miért is használtunk egyáltalán reduxaz útválasztónkban.

Miután elkezdtük vizsgálni a v4 reagálású útválasztót, rájöttünk, hogy az új funkciók nagyjából kiküszöbölik minden okot arra, hogy további könyvtárat használjunk az útválasztónk és a redux. Tehát ez lehetővé tette számunkra, hogy csak frissítsünk a 3-as reakció routerről 4-re, és eltávolítsuk   react-router-reduxaz alkalmazásunkból.

Tehát azt a feladatot kaptam, hogy frissítsem az útválasztónkat v4-re, miután csak 2 hónapig voltam a helyzetben és dolgoztam a React-tel. Ennek oka az volt, hogy a React Router 3-ról a React Router 4-re történő frissítés úgy hangzott, mintha triviális vállalkozásnak kellene lennie. De, amint gyorsan megtudtam, egy kicsit jobban érintett, mint amire számítottam.

Végignézve a dokumentációt, a GitHub repót és a sok-sok Stack Overflow választ, végül összeállítottam a frissítés lépéseit, és meg akartam osztani a megállapításokat - főleg, hogy elmagyarázzam, hogyan és miért történnek bizonyos változtatások.

A React Router készítőinek legnagyobb megjegyzendő változása az, hogy a React Router 3-ról a React Router 4-re történő frissítés nem csupán néhány könyvtár és szolgáltatás frissítése - ez lehetővé teszi, hogy alapjaiban változtassa meg a Router működését. A React Router készítői vissza akartak térni egy egyszerű Routerhez, lehetővé téve a fejlesztő számára, hogy tetszés szerint testreszabja azt.

Ezt az útmutatót 5 különböző részre osztottam:

  1. Csomag
  2. Történelem
  3. Útvonal
  4. Kellékek
  5. Redux integráció

Csomag

A React Router v4 csomagstruktúrája úgy változott, hogy már nem szükséges telepíteni a routert - telepítenie kell react-router-dom(és el kell távolítania react-router), de nem veszít semmit, mivel az exportálja újra az összes react-routerexportálását. Ez az eszköz akkor is meg kell frissíteni bármilyen   react-routerbehozatali nyilatkozatokat react-router-dom.

Történelem

A történelem az útvonal elengedhetetlen része, amely lehetővé teszi számunkra, hogy emlékezzünk arra, hogy honnan jöttünk és hol tartunk jelenleg. A történelem a reagáló útválasztó számára sokféle formában létezik, és elmagyarázása eltarthat egy ideig. Tehát, hogy a cikk továbbra is a témában maradjon, egyszerűen ajánlom, hogy olvassa el ezt a cikket, amely elmagyarázza az előzményeket a 4-es routerrel kapcsolatban. Ennek a cikknek ki kell terjednie az előzmények használatának legtöbb esetére.

Útvonal

A React Router v3 lehetővé tette számunkra, hogy az összes alkalmazás-útvonalunkat egy fájlba helyezzük, amelyet router.js-nek hívunk. A React Router v4 lehetővé teszi azonban az útvonalak elhelyezését az általuk renderelt összetevőkben. Az ötlet itt az alkalmazás dinamikus útvonala - más szóval, az útválasztás az alkalmazás renderelésének idején történik.

Ha azonban van egy megfelelő méretű örökölt kódalapja, amellyel dolgozik, akkor valószínűleg nem fog ekkora változtatást végrehajtani. Szerencsére a React Router v4 továbbra is lehetővé teszi az összes útvonal elhelyezését egy központi fájlban, így készítem el az összes példánkat. Van azonban néhány régebbi alkatrész és szolgáltatás, amelyeket ki kell cserélni.

IndexRoute

Korábban   IndexRoutea szülő útvonal alapértelmezett felhasználói felületének útvonalaként használták. De a v4-ben IndexRoutemár nem használják, mivel ez a funkció már elérhető az Útvonalban.

Az alapértelmezett felhasználói felület biztosításához több, azonos útvonallal rendelkező útvonal teszi lehetővé az összes társított összetevő megjelenítését:

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

Tehát az összes komponenst - Home, Aboutés Contact- lehetővé teszi majd. Emiatt már nem fészkelheti az Útvonalakat sem.

Ezen túlmenően, a jobb egyezés lehetővé tétele nélkül IndexRoute, használja a pontos kulcsszót.

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

Exkluzív útválasztás

A pontos kulcsszó hozzáadása után a rendszer “something.com/about”arra az útvonalra irányítja, amikor az útválasztó meglátja az utat “/about”. De most mi van, ha van más útja “/about/team”? Amint azt korábban említettem, az útválasztó mindent megjelenít, ami megfelel. Tehát, a mindkettőhöz kapcsolódó “/about”és   “/about/team”megjelenítendő összetevők . Ha ezt szánta, akkor az nagyszerű! Ha azonban nem ezt akarja, akkor lehet, hogy kapcsolót kell tennie az Útvonalak köré. Ez lehetővé teszi az URL-nek megfelelő első útvonal megjelenítését.

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

Ne feledje, hogy a pontos kulcsszónak továbbra is meg kell jelennie a Home komponensnél - különben megegyezik a következő útvonalakkal. Ne feledje, hogy még fel kell sorolnunk “/about/team”, “/about”így az útvonal a Teamkomponenshez megy, ahelyett, Abouthogy látná   “something.com/about/team”. Ha “/about”először látná, ott megállna és megjelenítené az Aboutösszetevőt, mert a Switch csak az első összetevőt rendereli, amelyik megfelel.

Alapértelmezett útvonal

Alapértelmezett útvonal vagy „mindent elkap” útvonal, amelyet általában 404 oldalnál használnak, az az útvonal, amelyet akkor használ, ha egyik útvonal sem felel meg.

A React Router v3 alapértelmezett Routeértéke:

A React Router v4 alapértelmezett Routeértéke a következő lett:

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!