Det största problemet med React Router 404 omdirigering är att det kan vara svårt att implementera. Eftersom React Router inte har en inbyggd 404-sida måste utvecklare manuellt skapa en rutt för 404-sidan och sedan konfigurera routern för att omdirigera eventuella förfrågningar som inte matchar en befintlig rutt. Detta kräver ytterligare kod och konfiguration, vilket kan vara tidskrävande och svårt att felsöka om något går fel. Dessutom, om en användare navigerar direkt till en webbadress som inte finns, kommer de fortfarande att se en felsida istället för att omdirigeras till 404-sidan.
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
const App = () => (
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/about" component={About} />
{/* 404 Redirect */}
<Route render={() => (<Redirect to="/" />)} />
</Switch>
</Router>
);
// Rad 1: Denna rad importerar BrowserRouter, Route och Switch-komponenterna från react-router-dom-biblioteket.
// Rad 3: Denna rad definierar en funktion som heter App som returnerar JSX.
// Raderna 5-7: Dessa rader omsluter appkomponenten i en routerkomponent från react-router-dom.
// Raderna 8-10: Dessa rader definierar två rutter för komponenterna Hem respektive Om.
// Linje 12: Denna linje definierar en rutt som omdirigerar till startsidan om ingen annan rutt matchar.
Vad är en 404-felkod
En 404-felkod i React Router är en HTTP-statuskod som indikerar att den begärda resursen inte kunde hittas. Det returneras vanligtvis när en användare försöker komma åt en sida eller rutt som inte finns. Detta kan inträffa om användaren har skrivit fel en URL eller om sidan har tagits bort eller flyttats utan att länkarna till den uppdaterats. När detta inträffar kommer React Router att visa en generisk 404-sida med ett lämpligt meddelande som informerar användaren om deras fel.
404 Omdirigering
I React Router är en 404-omdirigering ett sätt att omdirigera användare till en annan sida när de försöker komma åt en ogiltig URL. Detta kan vara användbart för att ge användare en bättre upplevelse när de anger en felaktig URL eller försöker komma åt en sida som inte finns. 404-omdirigeringen kan implementeras med hjälp av Redirect-komponenten från React Router, som låter dig ange sökvägen för sidan du vill omdirigera användaren till. Till exempel, om någon försöker komma åt /invalid-url, kan du använda Redirect-komponenten så här:
