Gelöst: Reload-Router-Reload-Seite nicht gefunden

Letzte Aktualisierung: 09/11/2023
Autor: JavaScript SourceTrail

Das Hauptproblem im Zusammenhang mit React Router Reload Page not found besteht darin, dass der Browser versucht, beim Server eine Anfrage für die aktuelle URL zu stellen, wenn ein Benutzer die Seite aktualisiert. Da React Router jedoch ein clientseitiges Routing ist, gibt es keine entsprechende Serverroute für die URL und daher wird ein 404 Not Found-Fehler zurückgegeben. Dies kann besonders problematisch sein, wenn Benutzer erwarten, dass bestimmte Inhalte bei der Aktualisierung angezeigt werden.

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

const App = () => (
  <Router>
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />

      {/* Page Not Found */}
      <Route render={() => (<h1>Page not found</h1>)} />

    </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-Code zurückgibt.

// Zeile 5: Diese Zeile umschließt den gesamten JSX-Code in einer Router-Komponente von „react-router-dom“.

// Zeile 6: Diese Zeile umschließt alle Routen in einer Switch-Komponente von React-Router-Dom.

// Zeilen 7 – 9: Diese Zeilen definieren zwei Routen für '/' bzw. '/about' mit ihren jeweiligen Komponenten (Home und About).

// Zeilen 11 – 12: Diese Zeilen definieren eine Route für den Fall, dass keine anderen Routen übereinstimmen, wodurch ein h1-Tag mit der Aufschrift „Seite nicht gefunden“ gerendert wird.

Fehler „Seite nicht gefunden“.

Der Fehler „Seite nicht gefunden“ in React Router ist ein Fehler, der auftritt, wenn ein Benutzer versucht, auf eine Seite oder Route zuzugreifen, die nicht existiert. Dies kann passieren, wenn der Benutzer die URL falsch eingegeben hat oder wenn die Seite, auf die er zugreifen möchte, entfernt oder verschoben wurde. In React Router wird dieser Fehler durch die Verwendung von behandelt Render-Prop der Komponente und Übergabe einer Funktion, die eine 404-Seite zurückgibt. Auf diese Weise können Entwickler benutzerdefinierte 404-Seiten mit beliebigen Inhalten erstellen, z. B. hilfreiche Links oder eine Entschuldigungsnachricht.

Wie gehe ich mit der Seite nicht gefunden im React-Router um

Wenn Sie React Router verwenden, können Sie mit einer nicht gefundenen Seite umgehen, indem Sie eine benutzerdefinierte Route erstellen, die eine NotFound-Komponente rendert, wenn die URL mit keiner der vorhandenen Routen übereinstimmt. Dazu müssen Sie eine neue Route mit dem auf „*“ gesetzten Pfad erstellen und Ihre NotFound-Komponente rendern.

Beispielsweise:

} />

Dies stimmt mit jeder URL überein, die noch nicht mit einer vorhandenen Route übereinstimmt, und rendert Ihre NotFound-Komponente.

Wie erzwinge ich das Neuladen einer reagierenden Seite

In React Router können Sie das Neuladen einer Seite erzwingen, indem Sie die replace-Methode für das History-Objekt verwenden. Dadurch wird der aktuelle Eintrag im Verlaufsstapel durch einen neuen ersetzt, wodurch ein Neuladen der Seite erzwungen wird. Um diese Methode zu verwenden, müssen Sie zuerst Zugriff auf das Verlaufsobjekt erhalten. Sie können dies tun, indem Sie es beim Erstellen Ihrer Router-Komponente als Prop übergeben:

const AppRouter = () => (

{/* Deine Routen hier */}

);

Sobald Sie Zugriff auf das Verlaufsobjekt haben, können Sie seine Ersetzungsmethode wie folgt verwenden:

history.replace('/some-route');

Zusammenhängende Posts: