Comment 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 permettait une navigation pratique en dehors des composants. Cependant, ce comportement n'est pas immédiatement apparent dans la v6.

Personnalisation de la navigation avec un routeur personnalisé

Une approche consiste à créer un routeur personnalisé qui utilise un objet d'historique personnalisé et gère l'état de navigation. Inspiré par l'implémentation de BrowserRouter dans la version 6 :

<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>

En utilisant ce routeur personnalisé avec un objet d'historique personnalisé, il proxy efficacement l'objet d'historique et gère l'état de navigation.

Échange de routeurs

Dans l'application React, vous pouvez ensuite échanger le routeur par défaut contre le routeur personnalisé :

<code class="javascript">export default function App() {
  return (
    <CustomRouter history={history}>
      <div className="App">
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/profile" element={<Profile />} />
        </Routes>
      </div>
    </CustomRouter>
  );
}</code>

Routeur d'historique instable

react-router-dom@6 a introduit un ' unstable' HistoryRouter qui permet l'injection d'une instance de bibliothèque d'historique personnalisée :

<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}>
    {/* The rest of your app goes here */}
  </HistoryRouter>,
  root
);</code>

Notez que cette API est marquée comme instable et peut nécessiter un affinement supplémentaire ou des considérations de gestion des dépendances.

RRDv6.4 avec Routeurs de données

Dans RRDv6.4 avec les routeurs de données, une fonction de navigation « instable » est directement exposée par l'objet routeur :

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

const router = createBrowserRouter(...);

...

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

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!