Résolu : Utiliser l'application History React Router v6

Le principal problème lié à l'utilisation de History React Router v6 est qu'il ne prend pas en charge le routage basé sur le hachage. Cela signifie que toutes les URL doivent être des chemins absolus, ce qui peut compliquer la gestion et la maintenance de l'application. De plus, il n'y a pas de prise en charge intégrée des itinéraires dynamiques, ce qui peut poser problème lors de la création d'applications complexes avec plusieurs pages. Enfin, History React Router v6 ne fournit aucun support pour le rendu côté serveur, qui peut être nécessaire dans certains cas.

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>   ); }

// Ce code importe les composants BrowserRouter, Switch, Route et useHistory de la bibliothèque react-router-dom.
// Il crée ensuite une fonction appelée App qui utilise le hook useHistory pour créer un objet d'historique.
// Cet objet d'historique est utilisé dans une fonction appelée handleClick qui pousse une nouvelle entrée sur la pile d'historique lorsqu'elle est appelée.
// La fonction App renvoie ensuite du JSX qui inclut un bouton avec un gestionnaire onClick qui appelle handleClick lorsqu'il est cliqué.
// Enfin, il existe un composant Switch avec un composant Route à l'intérieur qui rend le composant NewLocation lorsque son chemin correspond à "/ new-location".

A quoi sert l'Histoire

useHistory est un React Hook fourni par React Router qui permet aux composants d'accéder à l'objet d'historique afin de naviguer par programmation. Il peut être utilisé pour pousser de nouveaux emplacements dans la pile d'historique, remplacer l'emplacement actuel, aller et venir dans l'historique, etc.

Comment puis-je obtenir l'historique des itinéraires en réaction

Dans React Router, vous pouvez obtenir l'historique des routes en utilisant le crochet useHistory. Ce crochet donne accès à l'instance d'historique que vous pouvez utiliser pour naviguer, aller et venir dans l'historique de votre application, et plus encore. Pour l'utiliser, importez simplement le hook depuis React Router puis appelez-le dans votre composant :

import { useHistory } de 'react-router-dom' ;

const MonComposant = () => {
const histoire = useHistory();

// Vous pouvez maintenant accéder à l'historique des routes via l'objet `history`.

revenir (…);
}

Réagit le routeur utilise l'API d'historique

Oui, React Router utilise l'API HTML5 History pour garder une trace de l'emplacement actuel et de son historique. Cela permet à React Router de mettre à jour la page sans avoir à la recharger, ce qui rend la navigation plus rapide et plus fluide. L'API History permet également des liens profonds, ce qui permet aux utilisateurs de partager plus facilement des liens qui les amènent directement à une page spécifique dans une application.