Ha most kezdte a React-et, akkor valószínűleg még mindig az egész egyoldalas alkalmazás-koncepciót tekeri a fejével.

A hagyományos útválasztás így működik: tegyük fel, hogy beírja /contactaz URL-t. A böngésző GET-kérést küld a szervernek, és a szerver válaszként HTML-oldalt küld vissza.

De az új egyoldalas alkalmazás paradigmával az összes URL-kérést az ügyféloldali kóddal szolgálják ki.

Ezt a React kontextusában alkalmazva minden oldal React komponens lesz. A React-Router egyezik az URL-lel, és betölti az adott oldal összetevőjét.

Minden olyan gyorsan és zökkenőmentesen történik, hogy a felhasználó natív alkalmazásszerű élményt kap a böngészőben. Az útvonalátmenetek között nincs feltűnő üres oldal.

Ebben a cikkben megtudhatja, hogyan használhatja a React-Routert és annak összetevőit egyoldalas alkalmazás létrehozásához. Nyissa meg tehát kedvenc szövegszerkesztőjét, és kezdjük.

Állítsa be a projektet

Hozzon létre egy új React projektet a következő parancs futtatásával.

yarn create react-app react-router-demo

Fonalat fogok használni a függőségek telepítéséhez, de használhatja az npm-et is.

Ezután telepítsük react-router-dom.

yarn add react-router-dom

Az alkatrészek stílusához a Bulma CSS keretrendszert fogom használni. Tehát tegyük hozzá ezt is.

yarn add bulma

Ezután importálja bulma.min.cssa index.jsfájlba, és tisztítsa meg a kazán összes kódját a App.jsfájlból.

import "bulma/css/bulma.min.css";

Most, hogy elkészült a projekt, kezdjük néhány oldalösszetevő létrehozásával.

Az Oldalkomponensek létrehozása

Hozzon létre egy oldal könyvtárat az src mappában, ahol az összes oldalelemet parkolni fogjuk.

Ehhez a bemutatóhoz készítsen három oldalt - Főoldal, Névjegy és Profil.

Illessze be a következőket az Otthon és a Névjegy alkatrészek közé.

// pages/Home.js import React from "react"; const Home = () => ( 
This is the Home Page
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras gravida, risus at dapibus aliquet, elit quam scelerisque tortor, nec accumsan eros nulla interdum justo. Pellentesque dignissim, sapien et congue rutrum, lorem tortor dapibus turpis, sit amet vestibulum eros mi et odio. 
 ); export default Home; 

// pages/About.js import React from "react"; const About = () => ( 
This is the About Page
 Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Duis consequat nulla ac ex consequat, in efficitur arcu congue. Nam fermentum commodo egestas. 
 ); export default About; 

A Profil oldalt később hozzuk létre a cikkben.

Hozza létre a Navbar összetevőt

Kezdjük azzal, hogy létrehozzuk az alkalmazás navigációs sávját. Ez az összetevő a következő komponenst fogja használni react-router-dom.

Hozzon létre egy "components" nevű könyvtárat az src mappában.

// components/Navbar.js import React, { useState } from "react"; import { NavLink } from "react-router-dom"; const Navbar = () => { const [isOpen, setOpen] = useState(false); return ( {/* ... */} ); }; export default Navbar;

Az isOpenállapotváltozó a menü elindításához használható mobil vagy táblagépeken.

Tehát tegyük hozzá a hamburger menüt.

const Navbar = () => { const [isOpen, setOpen] = useState(false); return ( setOpen(!isOpen)} > {/* ... */} ); };

Felvenni a kapcsolatot a menüben a komponens react-router-dom.

Az NavLinkösszetevő deklaratív módon biztosítja a navigációt az alkalmazásban. Hasonló az Linkösszetevőhöz, csakhogy aktív stílust alkalmazhat a linkre, ha aktív.

Annak megadásához, hogy melyik útvonalon navigáljon, használja a totámaszt és adja meg az útvonal nevét.

A activeClassNamejavaslat hozzáad egy aktív osztályt a linkhez, ha az jelenleg aktív.

 Home 

A böngészőben az NavLinkösszetevő címkeként jelenik meg egy hrefattribútumértékkel, amelyet a toprop átadott .

Itt meg kell adnia a exacttámaszt is, hogy pontosan illeszkedjen az URL-hez.

Adja hozzá az összes linket, és fejezze be az Navbarösszetevőt.

import React, { useState } from "react"; import { NavLink } from "react-router-dom"; const Navbar = () => { const [isOpen, setOpen] = useState(false); return ( setOpen(!isOpen)} > Home   About   Profile Log in ); }; export default Navbar; 

Ha itt veszi észre, felvettem egy Bejelentkezés gombot. Még egyszer visszatérünk az Navbaralkatrészre, amikor a későbbiekben az útmutatóban megvitatjuk a védett útvonalakat.

Az oldalak renderelése

Most, hogy a Navbarkomponens be van állítva, tegyük hozzá az oldalhoz, és kezdjük az oldalak renderelésével.

Mivel a navigációs sáv az összes oldal közös eleme, ahelyett, hogy az egyes oldalak összetevőit meghívná, jobb megközelítés Navbara közös elrendezésben való megjelenítés.

// App.js function App() { return ( {/* Render the page here */} ); }

Most adja hozzá az oldal összetevőket a tároló belsejébe.

// App.js function App() { return ( ); }

Ha most megnézi az eredményeket, észreveszi, hogy a Kezdőlap és a Névjegy oldal komponens egyaránt megjelenik az oldalon. Ez azért van, mert még nem adtunk hozzá útválasztási logikát.

A BrowserRouterkomponensek továbbításának lehetőségéhez hozzá kell adnia az összetevőt a React Router-ről. Csak annyit kell tennie, hogy az oldal összes összetevőjét be kell csomagolni az BrowserRouterösszetevőbe. Ez lehetővé teszi az összes oldalelem számára az útválasztási logikát. Tökéletes!

De megint semmi sem fog változni az eredményekkel - továbbra is mindkét oldalt megjeleníti. Csak akkor kell megjelenítenie az oldalkomponentust, ha az URL megfelel egy adott elérési útnak. Itt Routejön szóba a React Router komponense.

Az Routerösszetevőnek van egy pathtámasza, amely elfogadja az oldal elérési útját, és az oldal összetevőt be kell csomagolni az Routeralábbiak szerint.

Tehát tegyük ugyanezt az Homealkatrész esetében is.

A exactfenti prop megmondja az Routerösszetevőnek, hogy pontosan illeszkedjen az útvonalhoz. Ha nem veszi fel a exacttámaszt az /ösvényen, akkor az megegyezik az összes útvonallal, /beleértve a kezdést /about.

Ha most megnézi az eredményeket, akkor is megjeleníti mindkét komponenst. De ha erre megy /about, észreveszi, hogy csak az Aboutösszetevő jelenik meg. Azért látja ezt a viselkedést, mert az útválasztó az URL-t az útvonalakkal folytatja, még akkor is, ha már megfelelt az útvonalnak.

Meg kell mondanunk az útválasztónak, hogy hagyja abba a további egyezést, amint egyezik az útvonallal. Ez Switcha React Router komponensével történik .

function App() { return ( ); }

Nesze! Sikeresen konfigurálta az útválasztást a React alkalmazásban.

Védett útvonalak és átirányítás

Amikor valós alkalmazásokon dolgozik, néhány útvonalat kell használnia egy hitelesítési rendszer mögött. Olyan útvonalak vagy oldalak lesznek, amelyekhez csak egy bejelentkezett felhasználó férhet hozzá. Ebben a szakaszban megtudhatja, hogyan kell végrehajtani az ilyen útvonalakat.

Felhívjuk figyelmét, hogy nem hozok létre bejelentkezési űrlapot, és semmilyen háttérszolgáltatás nem fogja hitelesíteni a felhasználót. Valódi alkalmazásban nem valósítaná meg a hitelesítést az itt bemutatott módon.

Hozzuk létre a Profil oldal összetevőt, amelyhez csak a hitelesített felhasználó férhet hozzá.

// pages/Profile.js import { useParams } from "react-router-dom"; const Profile = () => { const { name } = useParams(); return ( 
This is the Profile Page
{name}
 Lorem ipsum dolor sit amet, consectetur adipiscing elit.{" "} Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac{" "} eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem. ); }; 

Az útvonal-paraméterek segítségével megragadjuk a felhasználó nevét az URL-ből.

Adja hozzá a Profile útvonalat az útválasztóhoz.

Jelenleg a profiloldal közvetlenül elérhető. Tehát, hogy hitelesített útvonal legyen, hozzon létre egy magasabb rendű összetevőt (HOC) a hitelesítési logika beburkolásához.

const withAuth = (Component) => { const AuthRoute = () => { const isAuth = !!localStorage.getItem("token"); // ... }; return AuthRoute; };

To determine if a user is authenticated or not, grab the authentication token that is stored in the browser when the user logs in. If the user is not authenticated, redirect the user to the Home page. The Redirect component from React Router can be used to redirect the user to another path.

const withAuth = (Component) => { const AuthRoute = () => { const isAuth = !!localStorage.getItem("token"); if (isAuth) { return ; } else { return ; } }; return AuthRoute; };

You can also pass in other user information like name and user ID using props to the wrapped component.

Next, use the withAuth HOC in the Profile component.

import withAuth from "../components/withAuth"; const Profile = () => { // ... } export default withAuth(Profile);

Now, if you try to visit /profile/JohnDoe, you will get redirected to the Home page. That's because the authentication token is not yet set in your browser storage.

Alright, so, let's return to the Navbar component and add the login and logout functionalities. When the user is authenticated, show the Logout button and when the user is not logged in show the Login button.

// components/Navbar.js const Navbar = () => { // ... return ( {/* ... */} {!isAuth ? (  Log in  ) : (  Log out  )} ); } 

When the user clicks on the login button, set a dummy token in the local storage, and redirect the user to the profile page.

But we cannot use the Redirect component in this case – we need to redirect the user programmatically. Sensitive tokens used for authentication are usually stored in cookies for security reasons.

React Router has a withRouter HOC that injects the history object in the props of the component to leverage the History API. It also passes the updated match and location props to the wrapped component.

// components/Navbar.js import { NavLink, withRouter } from "react-router-dom"; const Navbar = ({ history }) => { const isAuth = !!localStorage.getItem("token"); const loginUser = () => { localStorage.setItem("token", "some-login-token"); history.push("/profile/Vijit"); }; const logoutUser = () => { localStorage.removeItem("token"); history.push("/"); }; return ( {/* ... */} ); }; export default withRouter(Navbar);

And voilà! That's it. You have conquered the land of authenticated routes as well.

Check out the live demo here and the complete code in this repo for your reference.

Conclusion

I hope by now you have a fair idea of how client-side routing works in general and how to implement routing in React using the React Router library.

In this guide, you learned about the vital components in React Router like Route, withRouter, Link, and so on, along with some advanced concepts like authenticated routes, that are required to build an application.

Do check out the React Router docs to get a more detailed overview of each of the components.