Riješeno: reagirajte usmjerivač dom IndexRedirect

Glavni problem povezan s React Router DOM IndexRedirect je taj što može uzrokovati neočekivana preusmjeravanja. To je zato što komponenta IndexRedirect automatski preusmjerava korisnike na određenu rutu kada pristupe korijenskom URL-u web stranice. Ovo može biti zbunjujuće za korisnike koji očekuju vidjeti početnu stranicu ili drugi sadržaj na korijenskom URL-u. Osim toga, ako je korisnik već otišao na određenu stranicu i zatim osvježi svoj preglednik, može biti neočekivano preusmjeren s te stranice zbog komponente IndexRedirect.

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. “uvezi { BrowserRouter kao Router, Route, IndexRedirect } iz 'react-router-dom';” – Ovaj redak uvozi komponente BrowserRouter, Route i IndexRedirect iz biblioteke react-router-dom.

2. "” – Ovaj redak umata sve rute u komponentu usmjerivača koja se koristi za postavljanje usmjeravanja za React aplikaciju.

3. "” – Ovaj redak postavlja rutu s putanjom '/'. Svi zahtjevi prema ovoj stazi bit će obrađeni ovom rutom.

4. "” – Ovaj redak preusmjerava sve zahtjeve na '/' stazu na '/home'.

5. "” – Ovaj redak postavlja rutu s putanjom '/home'. Sve zahtjeve prema ovoj stazi obradit će Home komponenta koja se prosljeđuje kao argument komponenti Ruta.

6. "” – Ovaj redak postavlja rutu s putanjom '/about'. Sve zahtjeve prema ovoj stazi obradit će komponenta About koja se prosljeđuje kao argument komponenti Ruta.

7.”” & “” – Ovi redovi zatvaraju i rute i komponente usmjerivača

Što je IndexRedirect

IndexRedirect je komponenta u React Routeru koja vam omogućuje preusmjeravanje s jedne rute na drugu. Koristi se kada želite preusmjeriti korisnika s korijenskog URL-a svoje aplikacije na drugu rutu. Na primjer, ako imate aplikaciju s korijenskim URL-om “/”, možete koristiti IndexRedirect za preusmjeravanje korisnika na “/home” kada posjete korijenski URL.

Kako napraviti IndexRedirect

IndexRedirect u React Routeru način je preusmjeravanja korisnika s korijenskog URL-a vaše aplikacije na drugi URL. To može biti korisno za usmjeravanje korisnika na najvažniju stranicu vaše aplikacije ili za izradu odredišne ​​stranice.

Da biste napravili IndexRedirect u React Routeru, morate koristiti komponenta. Ova komponenta ima dva rekvizita: "to" i "push". Prop "to" koristi se za određivanje URL-a na koji želite da korisnici budu preusmjereni, dok prop "push" određuje treba li ili ne povijest preglednika ažurirati kada se ovo preusmjeravanje dogodi (true prema zadanim postavkama).

Na primjer, ako želite da korisnici koji posjete vaš korijenski URL (npr. www.example.com) budu preusmjereni na www.example.com/home, možete koristiti IndexRedirect ovako:

... druge rute ...