Comment puis-je accéder et utiliser l'objet historique en dehors des composants dans React Router v6 ?

Navigation en dehors des composants dans React Router v6

Dans React Router v5, il était possible de créer un objet historique en dehors des composants et de le transmettre au routeur pour utilisation dans des contextes extérieurs. Cependant, cela n'est pas directement possible dans React Router v6.

Implémentation d'un routeur personnalisé

Une solution de contournement consiste à implémenter un routeur personnalisé qui instancie l'état de l'historique de la même manière que les routeurs React Router v6. Par exemple :

const CustomRouter = ({ history, ...props }) => {
  const [state, setState] = useState({
    action: history.action,
    location: history.location
  });

  useLayoutEffect(() => history.listen(setState), [history]);

  return (
    <Router
      {...props}
      location={state.location}
      navigationType={state.action}
      navigator={history}
    />
  );
};

Ce routeur personnalisé consomme un objet d'historique personnalisé et gère l'état de navigation. Vous pouvez ensuite remplacer le routeur par défaut par ce routeur personnalisé pour obtenir le comportement souhaité.

unstable_HistoryRouter

Une approche alternative consiste à utiliser le unstable_HistoryRouter exporté par React Router v6. Il prend une instance de la bibliothèque d'historique comme accessoire, vous permettant de l'utiliser en externe.

import { unstable_HistoryRouter as HistoryRouter } from "react-router-dom";
import { createBrowserHistory } from "history";

const history = createBrowserHistory({ window });

ReactDOM.render(
  <HistoryRouter history={history}>
    {/* The rest of your app goes here */}
  </HistoryRouter>,
  root
);

Veuillez noter que unstable_HistoryRouter peut être sujet à des modifications avec rupture à l'avenir.

Naviguer depuis le routeur directement (RRDv6.4)

Si vous utilisez React Router v6.4 ou version ultérieure et pas d'utiliser des routeurs de données, vous pouvez toujours accéder à unstable_HistoryRouter. Cependant, pour les routeurs de données, vous pouvez utiliser la fonction de navigation attachée à l'objet routeur :

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

const router = createBrowserRouter(...);

...

router.navigate(targetPath, options);

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!