Comment puis-je naviguer dans les composants externes dans React Router v6 ?

Navigation dans les composants externes dans React Router v6

Dans React Router v5, la création d'un objet d'historique global et sa transmission au routeur ont permis la navigation dans les composants externes. Cependant, cette approche n'est plus possible dans la v6.

Approche du routeur personnalisé

Pour résoudre ce problème, vous pouvez créer un routeur personnalisé qui instancie l'état de l'historique comme les routeurs React Router v6. Par exemple, pour un BrowserRouter :

<code class="javascript">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}
    />
  );
};</code>

Cela transmet l'objet d'historique personnalisé dans le routeur et gère l'état de navigation. Remplacez le routeur d'origine par celui personnalisé :

<code class="javascript">export default function App() {
  return (
    <CustomRouter history={history}>
      <div className="App">
        {/* ... */}
      </div>
    </CustomRouter>
  );
}</code>

HistoryRouter

React Router v6 introduit également unstable_HistoryRouter pour accéder à l'instance d'historique :

<code class="javascript">import { unstable_HistoryRouter as HistoryRouter } from "react-router-dom";
import { createBrowserHistory } from "history";

const history = createBrowserHistory({ window });

ReactDOM.render(
  <HistoryRouter history={history}>
    {/* ... */}
  </HistoryRouter>,
  root
);</code>

Cela exporte une instance de la bibliothèque d'historique, accessible en dehors des composants React.

Routeurs de données

Dans React Router v6.4, une nouvelle méthode de navigation "non attachée" est disponible pour les routeurs de données :

<code class="javascript">import { createBrowserRouter } from 'react-router-dom';

const router = createBrowserRouter(...);

router.navigate(targetPath, options);</code>

Cette méthode permet d'accéder directement à la fonction de navigation du routeur, permettant la navigation en dehors des composants avec les routeurs de données.

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!