Gelöst: Verwenden Sie die History React Router v6-App

Das Hauptproblem bei der Verwendung von History React Router v6 besteht darin, dass es kein Hash-basiertes Routing unterstützt. Das bedeutet, dass alle URLs absolute Pfade sein müssen, was die Verwaltung und Wartung der Anwendung erschweren kann. Außerdem gibt es keine integrierte Unterstützung für dynamische Routen, was ein Problem sein kann, wenn komplexe Anwendungen mit mehreren Seiten erstellt werden. Schließlich bietet History React Router v6 keine Unterstützung für serverseitiges Rendern, was in einigen Fällen erforderlich sein kann.

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

 function App() {

   const history = useHistory();

   // Handle a button click to push a new entry onto the history stack.
   function handleClick() {
     history.push("/new-location");
   }

   return (
     <div>      
       <button type="button" onClick={handleClick}>Go to New Location</button>       

       <Switch>        
         <Route path="/new-location">          
           <NewLocation />        
         </Route>      

       </Switch>    

     </div>   ); }

// Dieser Code importiert die Komponenten BrowserRouter, Switch, Route und useHistory aus der React-Router-Dom-Bibliothek.
// Dann erstellt es eine Funktion namens App, die den useHistory-Hook verwendet, um ein History-Objekt zu erstellen.
// Dieses Verlaufsobjekt wird in einer Funktion namens handleClick verwendet, die einen neuen Eintrag auf den Verlaufsstapel legt, wenn sie aufgerufen wird.
// Die App-Funktion gibt dann etwas JSX zurück, das eine Schaltfläche mit einem onClick-Handler enthält, der handleClick aufruft, wenn darauf geklickt wird.
// Schließlich gibt es eine Switch-Komponente mit einer darin enthaltenen Route-Komponente, die die NewLocation-Komponente rendert, wenn ihr Pfad mit „/new-location“ übereinstimmt.

Was ist useHistory

useHistory ist ein von React Router bereitgestellter React-Hook, der es Komponenten ermöglicht, auf das History-Objekt zuzugreifen, um programmgesteuert zu navigieren. Es kann verwendet werden, um neue Standorte in den Verlaufsstapel zu verschieben, den aktuellen Standort zu ersetzen, im Verlauf vor und zurück zu gehen usw.

Wie bekomme ich den Routenverlauf in React

In React Router können Sie den Routenverlauf abrufen, indem Sie den useHistory-Hook verwenden. Dieser Hook ermöglicht den Zugriff auf die Verlaufsinstanz, mit der Sie navigieren, im Verlauf Ihrer App vor- und zurückgehen und vieles mehr können. Um es zu verwenden, importieren Sie einfach den Hook von React Router und rufen Sie ihn dann in Ihrer Komponente auf:

importiere { useHistory } aus 'react-router-dom';

const MeineKomponente = () => {
const History = useHistory();

// Jetzt können Sie über das Objekt "history" auf die Routenhistorie zugreifen.

Rückkehr (…);
}

Reagiert der Router auf die Verlaufs-API?

Ja, React Router verwendet die HTML5 History API, um den aktuellen Standort und seinen Verlauf zu verfolgen. Dadurch kann React Router die Seite aktualisieren, ohne sie neu laden zu müssen, wodurch die Navigation schneller und reibungsloser wird. Die Verlaufs-API ermöglicht auch Deep-Linking, was es Benutzern erleichtert, Links zu teilen, die sie direkt zu einer bestimmten Seite in einer Anwendung führen.