Löst: reagera router dom IndexRedirect

Det största problemet med React Router DOM IndexRedirect är att det kan orsaka oväntade omdirigeringar. Detta beror på att IndexRedirect-komponenten automatiskt omdirigerar användare till en angiven rutt när de kommer åt rot-URL:n till en webbplats. Detta kan vara förvirrande för användare som förväntar sig att se hemsidan eller annat innehåll på rot-URL:n. Dessutom, om en användare redan har navigerat till en specifik sida och sedan uppdaterar sin webbläsare, kan de oväntat omdirigeras bort från den sidan på grund av en IndexRedirect-komponent.

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. "importera { BrowserRouter som Router, Route, IndexRedirect } från 'react-router-dom';" – Den här raden importerar komponenterna BrowserRouter, Route och IndexRedirect från react-router-dom-biblioteket.

2. "” – Den här raden omsluter alla rutter i en routerkomponent som används för att ställa in routing för en React-applikation.

3. "” – Den här linjen ställer in en rutt med sökvägen '/'. Alla förfrågningar till denna sökväg kommer att hanteras av denna rutt.

4. "” – Den här raden omdirigerar alla förfrågningar till '/'-sökvägen till '/home'.

5. "” – Den här raden ställer in en rutt med sökvägen '/home'. Alla förfrågningar till denna sökväg kommer att hanteras av Home-komponenten som skickas in som ett argument till Route-komponenten.

6. "” – Den här linjen ställer in en rutt med sökvägen '/about'. Alla förfrågningar till denna sökväg kommer att hanteras av Om-komponenten som skickas in som ett argument till ruttkomponenten.

7.”” & “” – Dessa linjer stänger ut både rutter och routerkomponenter

Vad är IndexRedirect

IndexRedirect är en komponent i React Router som låter dig omdirigera från en rutt till en annan. Den används när du vill omdirigera användaren från din applikations rot-URL till en annan rutt. Till exempel, om du har en applikation med en rot-URL på "/", kan du använda IndexRedirect för att omdirigera användaren till "/home" när de besöker rot-URL:n.

Hur man gör IndexRedirect

IndexRedirect i React Router är ett sätt att omdirigera användare från din applikations rot-URL till en annan URL. Detta kan vara användbart för att leda användare till den viktigaste sidan i din applikation eller för att skapa en målsida.

För att göra IndexRedirect i React Router måste du använda komponent. Denna komponent kräver två rekvisita: "till" och "push". "Till"-propet används för att ange URL-adressen som du vill att användarna ska omdirigeras till, medan "push"-propellen avgör om webbläsarhistoriken ska uppdateras eller inte när denna omdirigering inträffar (sant som standard).

Om du till exempel vill att användare som besöker din rot-URL (t.ex. www.example.com) ska omdirigeras till www.example.com/home, kan du använda en IndexRedirect så här:

… andra rutter …