React Router Tutorial - Kuinka tehdä, uudelleenohjata, vaihtaa, linkittää ja paljon muuta, koodiesimerkkien avulla

Jos olet juuri aloittanut Reactin käytön, olet todennäköisesti vielä kiertämässä päätäsi koko Single Page Application -konseptin ympärille.

Perinteisesti reititys toimii näin: sanotaan, että kirjoitat /contactURL-osoitteen. Selain tekee GET-pyynnön palvelimelle ja palvelin palauttaa vastauksena HTML-sivun.

Mutta uuden yhden sivun sovelluksen paradigman myötä kaikki URL-pyynnöt palvelevat asiakaspuolen koodia.

Soveltamalla tätä React-kontekstissa jokainen sivu on React-komponentti. React-Router vastaa URL-osoitetta ja lataa kyseisen sivun komponentin.

Kaikki tapahtuu niin nopeasti ja saumattomasti, että käyttäjä saa natiivisovelluksen kaltaisen kokemuksen selaimessa. Reitin siirtymien välillä ei ole räikeää tyhjää sivua.

Tässä artikkelissa opit käyttämään React-Routeria ja sen komponentteja yhden sivun sovelluksen luomiseen. Joten avaa suosikki tekstieditori, ja aloitetaan.

Asenna projekti

Luo uusi React-projekti suorittamalla seuraava komento.

yarn create react-app react-router-demo

Asennan riippuvuuksia langalla, mutta voit käyttää myös npm: tä.

Seuraavaksi asennetaan react-router-dom.

yarn add react-router-dom

Komponenttien muotoiluun aion käyttää Bulma CSS -kehystä. Joten lisätään myös se.

yarn add bulma

Tuo bulma.min.cssseuraavaksi index.jstiedostoon ja puhdista kaikki kattilakoodi App.jstiedostosta.

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

Nyt kun projekti on määritetty, aloitetaan luomalla muutama sivukomponentti.

Sivun komponenttien luominen

Luo src-kansion sisälle sivuhakemisto, johon pysäköimme kaikki sivukomponentit.

Luo tälle esittelylle kolme sivua - Koti, Tietoja ja Profiili.

Liitä seuraava Koti- ja Tietoja-komponenttien sisälle.

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

Luomme profiilisivun myöhemmin artikkelissa.

Luo Navbar-komponentti

Aloitetaan luomalla sovelluksemme navigointipalkki. Tämä komponentti käyttää komponenttia osoitteesta react-router-dom.

Luo hakemisto "komponentit" src-kansion sisälle.

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

isOpenTila muuttuja voidaan käynnistää valikosta mobiili- tai tablet-laitteissa.

Joten lisätään hampurilaisvalikko.

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

Lisää linkki valikkoon käyttämällä komponenttia react-router-dom.

NavLinkKomponentti tarjoaa declarative tavan liikkua ympäri sovelluksen. Se on samanlainen kuin Linkkomponentti, paitsi että se voi käyttää aktiivista tyyliä linkkiin, jos se on aktiivinen.

Määritä reitti, johon haluat navigoida, käyttämällä topotkuria ja välittämällä polun nimi.

activeClassNamePotkuri lisää aktiivista luokan linkkiä jos se on parhaillaan käytössä.

 Home 

Selaimessa NavLinkkomponentti hahmonnetaan tunnisteeksi, jonka hrefattribuutin arvo välitettiin torekvisiitassa.

Lisäksi tässä on määritettävä exactehdotus niin, että se vastaa tarkasti URL-osoitetta.

Lisää kaikki linkit ja viimeistele Navbarkomponentti.

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; 

Jos huomaat täällä, olen lisännyt kirjautumispainikkeen. Palaamme Navbarkomponenttiin uudelleen, kun keskustelemme myöhemmin oppaassa suojatuista reiteistä.

Sivujen renderointi

Nyt kun Navbarkomponentti on määritetty, lisätään se sivulle ja aloitetaan sivujen renderoinnilla.

Koska siirtymispalkki on yhteinen komponentti kaikilla sivuilla, sen sijaan, että kutsuisi komponenttia jokaisessa sivukomponentissa, se on parempi tapa tehdä renderöinti Navbaryhteisessä asettelussa.

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

Lisää nyt sivun komponentit säilön sisälle.

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

Jos tarkistat tulokset nyt, huomaat, että sekä Koti- että Tietoja-sivu-komponentti hahmonnetaan sivulle. Tämä johtuu siitä, että emme ole vielä lisänneet reitityslogiikkaa.

Sinun on tuotava BrowserRouterkomponentti React Router -sovelluksesta, jotta voit lisätä komponenttien reititysmahdollisuuden. Sinun tarvitsee vain kääriä kaikki sivukomponentit komponentin sisälle BrowserRouter. Tämä antaa kaikille sivun komponenteille mahdollisuuden reitityslogiikkaan. Täydellinen!

Mutta jälleen kerran, mikään ei muutu tulosten kanssa - näet edelleen molemmat sivut renderoiduina. Sivukomponentti on renderöitävä vain, jos URL-osoite vastaa tiettyä polkua. Siellä RouteReact Routerin komponentti tulee esiin.

RouterKomponentti on pathpotkuri, joka hyväksyy sivun polun ja sivun komponentti on käärittävä kanssa Router, kuten alla.

Joten tehdään sama Homekomponentille.

exactYllä oleva potkuri käskee Routerkomponentin vastaamaan polkua tarkalleen. Jos et lisää exactrekvisiittaa /polulle, se sopii kaikkiin reitteihin, jotka alkavat /mukaan lukien /about.

Jos menet katsomaan tuloksia nyt, näet edelleen molemmat komponentit renderoidusti. Mutta jos menet /about, huomaat, että vain Aboutkomponentti renderöidään. Näet tämän käyttäytymisen, koska reititin jatkaa URL-osoitteen vastaamista reittien kanssa, vaikka se olisi jo sovittanut reitin.

Meidän on kerrottava reitittimelle, että se lopettaa vastaamisen, kun se vastaa reittiä. Tämä tehdään käyttämällä SwitchReact Router -sovelluksen komponenttia.

function App() { return ( ); }

Ole hyvä! Olet määrittänyt reitityksen onnistuneesti React-sovelluksessasi.

Suojatut reitit ja uudelleenohjaus

Kun työskentelet reaalimaailman sovelluksissa, sinulla on joitain reittejä todennusjärjestelmän takana. Sinulla on reittejä tai sivuja, joihin pääsee vain sisäänkirjautunut käyttäjä. Tässä osassa opit, miten edetä tällaisten reittien toteuttamisessa.

Huomaa, että en aio luoda kirjautumislomaketta tai että jokin taustapalvelu todentaa käyttäjän. Todellisessa sovelluksessa et toteuttaisi todennusta tässä esitetyllä tavalla.

Luodaan Profiilisivun komponentti, jota vain todennetun käyttäjän tulisi käyttää.

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

Tartu käyttäjän nimi URL-osoitteesta reittiparametreilla.

Lisää profiilireitti reitittimeen.

Tällä hetkellä profiilisivulle pääsee suoraan. Joten jotta siitä tulisi todennettu reitti, luo korkeamman tason komponentti (HOC) käärimään todennuslogiikka.

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

Ja voilà ! Se siitä. Olet myös valloittanut todennettujen reittien maan.

Katso live-esittely täältä ja koko koodi tässä repossa viitteellesi.

Johtopäätös

Toivon, että sinulla on jo nyt hyvä käsitys siitä, miten asiakaspuolen reititys toimii yleensä ja miten reititys toteutetaan Reactissa React Router -kirjaston avulla.

Tässä oppaassa opit elintärkeitä osia Reagoida Router kuten Route, withRouter, Link, ja niin edelleen, sekä joitakin kehittyneitä käsitteitä kuten todennettu reittejä, joita tarvitaan rakentamaan sovelluksen.

Tutustu React Router -asiakirjoihin saadaksesi tarkemman yleiskuvan kustakin komponentista.