Ratkaistu: React router dom IndexRedirect

Suurin React Router DOM IndexRedirectiin liittyvä ongelma on, että se voi aiheuttaa odottamattomia uudelleenohjauksia. Tämä johtuu siitä, että IndexRedirect-komponentti uudelleenohjaa käyttäjät automaattisesti tietylle reitille, kun he käyttävät verkkosivuston pääURL-osoitetta. Tämä voi olla hämmentävää käyttäjille, jotka odottavat näkevänsä etusivun tai muun sisällön juuri-URL-osoitteessa. Lisäksi, jos käyttäjä on jo siirtynyt tietylle sivulle ja päivittää sitten selaimensa, hänet voidaan odottamatta uudelleenohjata pois sivulta IndexRedirect-komponentin vuoksi.

import { BrowserRouter as Router, Route, IndexRedirect } from "react-router-dom";

<Router>
  <Route path="/">
    <IndexRedirect to="/home" />
    <Route path="/home" component={Home} />
    <Route path="/about" component={About} />
  </Route>  
</Router>

1. "tuo { BrowserRouter as Router, Route, IndexRedirect } osoitteesta "react-router-dom";" – Tämä rivi tuo BrowserRouter-, Route- ja IndexRedirect-komponentit react-router-dom-kirjastosta.

2. "” – Tämä rivi kääri kaikki reitit reititinkomponenttiin, jota käytetään React-sovelluksen reitityksen määrittämiseen.

3. "” – Tämä rivi määrittää reitin, jonka polku on '/'. Kaikki tälle polulle tulevat pyynnöt käsitellään tällä reitillä.

4. "” – Tämä rivi ohjaa kaikki pyynnöt '/'-polkuun osoitteeseen '/home'.

5. "” – Tämä rivi määrittää reitin, jonka polku on '/home'. Kaikki tälle polulle tulevat pyynnöt käsitellään Home-komponentilla, joka välitetään argumenttina Route-komponenttiin.

6. "” – Tämä rivi määrittää reitin, jonka polku on '/about'. Kaikki tälle polulle tulevat pyynnöt käsitellään Tietoja-komponentilla, joka välitetään argumenttina Reitti-komponenttiin.

7.”” & ”” – Nämä rivit sulkevat sekä reitit että reitittimen komponentit

Mikä on IndexRedirect

IndexRedirect on React Routerin komponentti, jonka avulla voit uudelleenohjata reitiltä toiselle. Sitä käytetään, kun haluat ohjata käyttäjän sovelluksesi juuri-URL-osoitteesta toiselle reitille. Jos sinulla on esimerkiksi sovellus, jonka pää-URL-osoite on "/", voit käyttää IndexRedirectiä uudelleenohjataksesi käyttäjän osoitteeseen "/home", kun hän käy pää-URL-osoitteessa.

Kuinka tehdä IndexRedirect

IndexRedirect React Routerissa on tapa ohjata käyttäjät sovelluksesi juuri-URL-osoitteesta toiseen URL-osoitteeseen. Tästä voi olla hyötyä ohjattaessa käyttäjiä sovelluksesi tärkeimmälle sivulle tai luotaessa aloitussivu.

Jos haluat tehdä IndexRedirectin React Routerissa, sinun on käytettävä komponentti. Tämä komponentti vaatii kaksi tukea: "to" ja "push". Vastaanottaja-ehdotusta käytetään määrittämään URL-osoite, johon haluat käyttäjien uudelleenohjattavan, kun taas "push"-ehdotus määrittää, tuleeko selainhistoria päivittää tämän uudelleenohjauksen yhteydessä (oletuksena totta).

Jos esimerkiksi haluat, että juuri URL-osoitteessasi (esim. www.example.com) käyvät käyttäjät ohjataan osoitteeseen www.example.com/home, voit käyttää IndexRedirectiä seuraavasti:

… muut reitit…