Das Hauptproblem im Zusammenhang mit der Weiterleitung von React Router 404 besteht darin, dass die Implementierung schwierig sein kann. Da React Router keine integrierte 404-Seite hat, müssen Entwickler manuell eine Route für die 404-Seite erstellen und den Router dann so konfigurieren, dass er alle Anfragen umleitet, die nicht mit einer vorhandenen Route übereinstimmen. Dies erfordert zusätzlichen Code und zusätzliche Konfiguration, was zeitaufwändig und schwierig zu debuggen sein kann, wenn etwas schief geht. Wenn ein Benutzer außerdem direkt zu einer URL navigiert, die nicht existiert, wird ihm weiterhin eine Fehlerseite angezeigt, anstatt auf die 404-Seite umgeleitet zu werden.
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>
);
// Zeile 1: Diese Zeile importiert die BrowserRouter-, Route- und Switch-Komponenten aus der React-Router-Dom-Bibliothek.
// Zeile 3: Diese Zeile definiert eine Funktion namens App, die JSX zurückgibt.
// Zeilen 5-7: Diese Zeilen packen die App-Komponente in eine Router-Komponente von React-Router-Dom.
// Zeilen 8-10: Diese Zeilen definieren jeweils zwei Routen für die Home- und About-Komponenten.
// Zeile 12: Diese Zeile definiert eine Route, die zur Startseite umleitet, wenn keine andere Route passt.
Was ist ein 404-Fehlercode?
Ein 404-Fehlercode in React Router ist ein HTTP-Statuscode, der angibt, dass die angeforderte Ressource nicht gefunden werden konnte. Es wird normalerweise zurückgegeben, wenn ein Benutzer versucht, auf eine nicht vorhandene Seite oder Route zuzugreifen. Dies kann vorkommen, wenn der Benutzer eine URL falsch eingegeben hat oder wenn die Seite entfernt oder verschoben wurde, ohne die Links zu ihr zu aktualisieren. In diesem Fall zeigt React Router eine generische 404-Seite mit einer entsprechenden Meldung an, die den Benutzer über seinen Fehler informiert.
404 Redirect
In React Router ist eine 404-Umleitung eine Möglichkeit, Benutzer auf eine andere Seite umzuleiten, wenn sie versuchen, auf eine ungültige URL zuzugreifen. Dies kann nützlich sein, um Benutzern ein besseres Erlebnis zu bieten, wenn sie eine falsche URL eingeben oder versuchen, auf eine nicht vorhandene Seite zuzugreifen. Die 404-Weiterleitung kann mithilfe der Redirect-Komponente von React Router implementiert werden, mit der Sie den Pfadnamen der Seite angeben können, auf die Sie den Benutzer umleiten möchten. Wenn beispielsweise jemand versucht, auf /invalid-url zuzugreifen, könnten Sie die Umleitungskomponente wie folgt verwenden:
