Rešeno: odziv usmerjevalnika dom IndexRedirect

Glavna težava v zvezi z React Router DOM IndexRedirect je, da lahko povzroči nepričakovane preusmeritve. To je zato, ker komponenta IndexRedirect samodejno preusmeri uporabnike na določeno pot, ko dostopajo do korenskega URL-ja spletnega mesta. To je lahko zmedeno za uporabnike, ki pričakujejo, da bodo domačo stran ali drugo vsebino videli na korenskem URL-ju. Poleg tega, če je uporabnik že obiskal določeno stran in nato osveži brskalnik, je lahko zaradi komponente IndexRedirect nepričakovano preusmerjen stran od te strani.

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 } from 'react-router-dom';” – Ta vrstica uvozi komponente BrowserRouter, Route in IndexRedirect iz knjižnice react-router-dom.

2. "” – Ta vrstica ovije vse poti v komponenti usmerjevalnika, ki se uporablja za nastavitev usmerjanja za aplikacijo React.

3. "” – Ta vrstica nastavi pot s potjo '/'. Vse zahteve na tej poti bo obravnavala ta pot.

4. "” – Ta vrstica preusmeri vse zahteve na pot '/' do '/home'.

5. "” – Ta vrstica nastavi pot s potjo '/home'. Vse zahteve za to pot bo obravnavala komponenta Home, ki je kot argument posredovana komponenti Route.

6. "” – Ta vrstica nastavi pot s potjo '/about'. Vse zahteve za to pot bo obravnavala komponenta About, ki je kot argument posredovana komponenti Route.

7.”” & “” – Ti vrstici zapirata obe poti oziroma komponente usmerjevalnika

Kaj je IndexRedirect

IndexRedirect je komponenta v React Routerju, ki vam omogoča preusmeritev z ene poti na drugo. Uporablja se, ko želite uporabnika preusmeriti s korenskega URL-ja vaše aplikacije na drugo pot. Na primer, če imate aplikacijo s korenskim URL-jem »/«, lahko uporabite IndexRedirect za preusmeritev uporabnika na »/home«, ko obišče korenski URL.

Kako narediti IndexRedirect

IndexRedirect v React Routerju je način za preusmeritev uporabnikov s korenskega URL-ja vaše aplikacije na drug URL. To je lahko koristno za usmerjanje uporabnikov na najpomembnejšo stran vaše aplikacije ali za ustvarjanje ciljne strani.

Če želite izvesti IndexRedirect v React Routerju, morate uporabiti komponento. Ta komponenta ima dva elementa: »to« in »push«. Podstavek »to« se uporablja za določitev URL-ja, na katerega želite preusmeriti uporabnike, medtem ko podstavek »push« določa, ali naj se zgodovina brskalnika posodobi, ko pride do te preusmeritve (privzeto velja).

Na primer, če želite, da so uporabniki, ki obiščejo vaš korenski URL (npr. www.example.com), preusmerjeni na www.example.com/home, lahko uporabite IndexRedirect, kot je ta:

… druge poti …