Rešeno: reagovati ruter dom IndexRedirect

Glavni problem vezan za 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 da vide početnu stranicu ili drugi sadržaj na korijenskom URL-u. Osim toga, ako je korisnik već navigirao do određene stranice, a zatim osvježi svoj preglednik, može biti neočekivano preusmjeren sa 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. “import { BrowserRouter as Router, Route, IndexRedirect } iz 'react-router-dom';” – Ova linija uvozi komponente BrowserRouter, Route i IndexRedirect iz biblioteke react-router-dom.

2. "” – Ova linija umotava sve rute u komponentu rutera koja se koristi za postavljanje rutiranja za React aplikaciju.

3. "” – Ova linija postavlja rutu s putanjom '/'. Svi zahtjevi za ovu stazu će biti obrađeni ovom rutom.

4. "” – Ova linija preusmjerava sve zahtjeve na '/' putanju do '/home'.

5. "” – Ova linija postavlja rutu s putanjom '/home'. Svim zahtjevima za ovu putanju će upravljati komponenta Home koja se prosljeđuje kao argument komponenti Route.

6. "” – Ova linija postavlja rutu s putanjom '/about'. Svim zahtjevima za ovu putanju će upravljati komponenta About koja se prosljeđuje kao argument komponenti Route.

7.”” & “” – Ove linije zatvaraju i rute i komponente rutera

Šta je IndexRedirect

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

Kako napraviti IndexRedirect

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

Da biste izvršili IndexRedirect u React Routeru, trebate koristiti komponenta. Ova komponenta uzima dva rekvizita: “to” i “push”. “to” prop se koristi za specificiranje URL-a na koji želite da korisnici budu preusmjereni, dok “push” prop određuje da li se historija pretraživača treba ažurirati kada se ovo preusmjeravanje dogodi (podrazumevano je tačno).

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…