Gelöst: Umleitung in React Router v6

Das Hauptproblem im Zusammenhang mit der Weiterleitung in React Router v6 besteht darin, dass sich die Syntax für Weiterleitungen gegenüber früheren Versionen erheblich geändert hat. In v6 muss die Redirect-Komponente anstelle von verwendet werden -Element, und die Eigenschaft to muss mit einem Objekt bereitgestellt werden, das eine Eigenschaft pathname enthält. Darüber hinaus müssen alle zusätzlichen Props wie Zustands- oder Abfrageparameter ebenfalls in diesem Objekt enthalten sein. Dies kann es für Entwickler schwierig machen, die es gewohnt sind, die einfachere Syntax früherer Versionen von React Router zu verwenden.

In React Router v6, you can use the <Redirect> component to redirect from one page to another.

Example: 

import { Redirect } from 'react-router-dom'; 
 
<Route exact path="/old-path"> 
   <Redirect to="/new-path" /> 
</Route>

1. importiere {Redirect} von 'react-router-dom';
– Diese Zeile importiert die Redirect-Komponente aus der React-Router-Dom-Bibliothek.

2.
– Diese Zeile erstellt eine Route-Komponente mit einem genauen Pfad von „/old-path“.

3.
– Diese Zeile verwendet die Redirect-Komponente, um von „/old-path“ auf „/new-path“ umzuleiten.

Wie kann ich in React Router v6

v6

React Router v6 bietet eine Umleitungskomponente, mit der Benutzer von einer Seite auf eine andere umgeleitet werden können. Um die Umleitungskomponente zu verwenden, müssen Sie sie aus dem Paket „react-router-dom“ importieren. Die Redirect-Komponente benötigt zwei Requisiten: from und to. Das „from“-Prop ist der Pfad der aktuellen Seite und das „to“-Prop ist der Pfad der Seite, auf die Sie Benutzer umleiten möchten. Wenn Sie beispielsweise Benutzer von /homepage nach /about umleiten möchten, würde Ihr Code wie folgt aussehen:

import { Redirect } from 'react-router-dom';

Was ist der Reaktionsrouter?

React Router ist eine Routing-Bibliothek für React, mit der Entwickler Single-Page-Anwendungen mit Navigation und dynamischem, zustandsbasiertem Routing erstellen können. Es hilft, die Benutzeroberfläche mit der URL synchron zu halten, was es Benutzern erleichtert, URLs zu teilen und mit Lesezeichen zu versehen. React Router bietet auch leistungsstarke Funktionen wie verzögertes Laden, Routenschutz und Handhabung des Standortübergangs.

Arten von Routern in Reaktion

React Router ist eine Routing-Bibliothek für React, mit der Entwickler Single-Page-Anwendungen mit Navigation und URL-Routing erstellen können. Es bietet drei Arten von Routern: BrowserRouter, HashRouter und MemoryRouter.

BrowserRouter: Dieser Router verwendet die HTML5-Verlaufs-API, um Ihre Benutzeroberfläche mit der URL synchron zu halten. Es wird verwendet, wenn Sie echte URLs in Ihrer Anwendung verwenden möchten.

HashRouter: Dieser Router verwendet den Hash-Teil der URL (dh #), um Ihre Benutzeroberfläche mit der URL synchron zu halten. Es wird verwendet, wenn Sie keine echten URLs verwenden möchten oder wenn Sie Kompatibilität mit älteren Browsern benötigen, die die HTML5-Verlaufs-API nicht unterstützen.

MemoryRouter: Dieser Router behält einen Verlauf der Standorte im Speicher und interagiert nicht mit der Adressleiste des Browsers oder erstellt keine echten URLs. Es ist nützlich für Testzwecke oder für Umgebungen, in denen die Verwendung echter URLs nicht wünschenswert ist (z. B. serverseitiges Rendern).