React Router Tutorial - Sådan gengives, omdirigeres, switch, link og mere med kodeeksempler

Hvis du lige er startet med React, pakker du sandsynligvis stadig hovedet rundt i hele Single Page Application-konceptet.

Traditionelt fungerer routing sådan: lad os sige, at du skriver i /contactURL'en. Browseren sender en GET-anmodning til serveren, og serveren returnerer en HTML-side som svar.

Men med det nye paradigme til enkelt side-applikation serveres alle URL-anmodninger ved hjælp af klientsiden.

Hvis du anvender dette i forbindelse med React, vil hver side være en React-komponent. React-Router matcher URL'en og indlæser komponenten til den pågældende side.

Alt sker så hurtigt og problemfrit, at brugeren får en native app-lignende oplevelse i browseren. Der er ingen prangende blank side imellem ruteovergange.

I denne artikel lærer du, hvordan du bruger React-Router og dens komponenter til at oprette en enkelt sideapplikation. Så åbn din yndlings teksteditor, og lad os komme i gang.

Opsæt projektet

Opret et nyt React-projekt ved at køre følgende kommando.

yarn create react-app react-router-demo

Jeg bruger garn til at installere afhængighederne, men du kan også bruge npm.

Lad os derefter installere react-router-dom.

yarn add react-router-dom

Til styling af komponenterne skal jeg bruge Bulma CSS-rammen. Så lad os tilføje det også.

yarn add bulma

Dernæst import bulma.min.cssi index.jsfilen og ren op hele standardtekst koden fra App.jsfilen.

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

Nu hvor du har opsat projektet, lad os starte med at oprette et par sidekomponenter.

Oprettelse af sidekomponenter

Opret en sidekatalog inde i src-mappen, hvor vi parkerer alle sidekomponenterne.

Opret tre sider til denne demo - Hjem, Om og Profil.

Indsæt følgende inde i Home- og About-komponenterne.

// 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;

Vi opretter profilsiden senere i artiklen.

Opret Navbar-komponenten

Lad os starte med at oprette navigationslinjen til vores app. Denne komponent bruger komponenten fra react-router-dom.

Opret en mappe kaldet "komponenter" inde i src-mappen.

// 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;

Den isOpentilstandsvariable vil blive anvendt til at udløse menuen på mobile eller tablets.

Så lad os tilføje hamburger-menuen.

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

For at tilføje linket i menuen skal du bruge komponenten ved react-router-dom.

Den NavLinkkomponent giver en deklarativ måde at navigere rundt i programmet. Det svarer til Linkkomponenten, bortset fra at det kan anvende en aktiv stil på linket, hvis den er aktiv.

For at specificere, hvilken rute du skal navigere til, skal du bruge toprop og videregive stienavnet.

Støtten activeClassNametilføjer en aktiv klasse til linket, hvis den i øjeblikket er aktiv.

 Home 

I browseren NavLinkgengives komponenten som et tag med en hrefattributværdi, der blev sendt i toprop.

Her er du også nødt til at specificere exactprop'en, så den matches nøjagtigt med URL'en.

Tilføj alle links og afslut Navbarkomponenten.

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; 

Hvis du bemærker her, har jeg tilføjet en Login-knap. Vi kommer tilbage til Navbarkomponenten igen, når vi diskuterer beskyttede ruter senere i guiden.

Gengivelse af siderne

Nu hvor Navbarkomponenten er opsat, lad os tilføje det til siden og starte med gengivelse af siderne.

Da navigationslinjen er en almindelig komponent på tværs af alle siderne, i stedet for at kalde komponenten i hver sidekomponent, vil det være en bedre tilgang til at gengive den Navbari et fælles layout.

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

Tilføj nu sidekomponenterne inde i containeren.

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

Hvis du tjekker resultaterne nu, vil du bemærke, at både Home- og About-sidekomponenten gengives på siden. Det er fordi vi endnu ikke har tilføjet nogen routinglogik.

Du skal importere BrowserRouterkomponenten fra React Router for at tilføje muligheden for at dirigere komponenterne. Alt hvad du skal gøre er at pakke alle sidekomponenterne inde i BrowserRouterkomponenten. Dette gør det muligt for alle sidekomponenterne at have routinglogikken. Perfekt!

Men igen, intet vil ændre sig med resultaterne - du vil stadig se begge sider gengivet. Du skal kun gengive sidekomponenten, hvis URL'en matcher en bestemt sti. Det er her, Routekomponenten fra React Router kommer i spil.

Den Routerkomponent har en pathprop, der accepterer sidens vej, og den side komponent skal pakkes med den Router, som vist nedenfor.

Så lad os gøre det samme for Homekomponenten.

Støtten exactovenfor fortæller Routerkomponenten at matche stien nøjagtigt. Hvis du ikke tilføjer exactstiften på /stien, vil den matche med alle ruterne, der starter med en /inklusive /about.

Hvis du går og tjekker resultaterne nu, vil du stadig se begge komponenter, der er gengivet. Men hvis du går til /about, vil du bemærke, at kun Aboutkomponenten bliver gengivet. Du ser denne adfærd, fordi routeren fortsat matcher URL'en med ruterne, selv efter at den allerede havde matchet en rute.

Vi er nødt til at bede routeren om at stoppe med at matche yderligere, når den matcher en rute. Dette gøres ved hjælp af Switchkomponenten fra React Router.

function App() { return ( ); }

Værsgo! Du har konfigureret routing med succes i din React-app.

Beskyttede ruter og omdirigering

Når du arbejder på applikationer fra den virkelige verden, har du nogle ruter bag et godkendelsessystem. Du vil have ruter eller sider, der kun kan tilgås af en logget bruger. I dette afsnit lærer du, hvordan du implementerer sådanne ruter.

Bemærk, at jeg ikke vil oprette nogen loginformular eller have nogen back-end-tjeneste, der godkender brugeren. I en rigtig applikation ville du ikke implementere godkendelse som vist her.

Lad os oprette komponenten Profilside, der kun skal tilgås af den godkendte bruger.

// 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. ); };

Vi henter brugerens navn fra URL'en ved hjælp af ruteparametre.

Tilføj profilruten til routeren.

I øjeblikket kan man få adgang til profilsiden direkte. For at gøre det til en godkendt rute skal du oprette en HOC (Higher-Order component) for at indpakke godkendelseslogikken.

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);

Og voilà ! Det er det. Du har også erobret landet med autentificerede ruter.

Tjek live demo her og den komplette kode i denne repo til din reference.

Konklusion

Jeg håber, at du nu har en god idé om, hvordan routing på klientsiden fungerer generelt, og hvordan man implementerer routing i React ved hjælp af React Router-biblioteket.

I denne vejledning har du lært om de vitale komponenter i React Router ligesom Route, withRouter, Link, og så videre, sammen med nogle avancerede begreber som godkendte ruter, der er nødvendige for at opbygge en applikation.

Tjek React Router-dokumenterne for at få et mere detaljeret overblik over hver af komponenterne.