Ratkaistu: Kuinka ohjata uudelleen React Router v6:ssa

Suurin React Router v6:n uudelleenohjaukseen liittyvä ongelma on se, että uudelleenohjausten syntaksi on muuttunut merkittävästi aiemmista versioista. V6:ssa Redirect-komponenttia on käytettävä elementti ja to prop on varustettava objektilla, joka sisältää polunnimi-ominaisuuden. Lisäksi tähän objektiin on sisällytettävä kaikki lisäominaisuudet, kuten tila- tai kyselyparametrit. Tämä voi tehdä vaikeaksi kehittäjien, jotka ovat tottuneet käyttämään React Routerin aikaisempien versioiden yksinkertaisempaa syntaksia.

In React Router v6, you can use the <Redirect> component to redirect from one page to another.

Example: 

import { Redirect } from 'react-router-dom'; 
 
<Route exact path="/old-path"> 
   <Redirect to="/new-path" /> 
</Route>

1. tuo { Redirect } osoitteesta "react-router-dom";
– Tämä rivi tuo Redirect-komponentin react-router-dom-kirjastosta.

2.
– Tämä rivi luo reittikomponentin, jonka tarkka polku on "/old-path".

3.
– Tämä rivi käyttää Redirect-komponenttia uudelleenohjaamaan "/old-path":sta osoitteeseen "/new-path".

Kuinka voin ohjata uudelleen React Router v6:ssa

v6

React Router v6 tarjoaa uudelleenohjauskomponentin, jota voidaan käyttää ohjaamaan käyttäjiä sivulta toiselle. Jotta voit käyttää uudelleenohjauskomponenttia, sinun on tuotava se react-router-dom-paketista. Uudelleenohjauskomponentti ottaa kaksi rekvisiittaa: from ja to. "Alkaen"-prop on nykyisen sivun polku, ja "to"-propanteri on sen sivun polku, jolle haluat ohjata käyttäjät. Jos esimerkiksi haluat ohjata käyttäjät osoitteesta /homepage osoitteeseen /about, koodisi näyttäisi tältä:

tuo { Uudelleenohjaus } osoitteesta 'react-router-dom';

Mikä on react-reititin?

React Router on Reactin reitityskirjasto, jonka avulla kehittäjät voivat luoda yksisivuisia sovelluksia, joissa on navigointi ja dynaaminen, tilaperusteinen reititys. Se auttaa pitämään käyttöliittymän synkronoituna URL-osoitteen kanssa, mikä helpottaa URL-osoitteiden jakamista ja merkitsemistä kirjanmerkkeihin. React Router tarjoaa myös tehokkaita ominaisuuksia, kuten laiska lataus, reitin suojaus ja sijainnin siirtymisen käsittely.

Reititintyypit reagoivat

React Router on Reactin reitityskirjasto, jonka avulla kehittäjät voivat luoda yksisivuisia sovelluksia, joissa on navigointi ja URL-reititys. Se tarjoaa kolmen tyyppisiä reitittimiä: BrowserRouter, HashRouter ja MemoryRouter.

BrowserRouter: Tämä reititin käyttää HTML5-historiasovellusliittymää pitääkseen käyttöliittymäsi synkronoituna URL-osoitteen kanssa. Sitä käytetään, kun haluat käyttää oikeita URL-osoitteita sovelluksessasi.

HashRouter: Tämä reititin käyttää URL-osoitteen hash-osaa (eli #) pitääkseen käyttöliittymäsi synkronoituna URL-osoitteen kanssa. Sitä käytetään, kun et halua käyttää oikeita URL-osoitteita tai kun tarvitset yhteensopivuutta vanhempien selainten kanssa, jotka eivät tue HTML5-historiasovellusliittymää.

MemoryRouter: Tämä reititin säilyttää sijaintihistorian muistissa eikä ole vuorovaikutuksessa selaimen osoitepalkin kanssa tai luo oikeita URL-osoitteita. Se on hyödyllinen testaustarkoituksiin tai ympäristöissä, joissa oikeiden URL-osoitteiden käyttäminen ei ole toivottavaa (esim. palvelinpuolen renderöinti).