Comment naviguer par programme dans React Router v4, v5 et v6 ?

Navigation par programme avec React Router

Dans React Router, l'élément Link permet une navigation native à l'aide d'hyperliens. Cependant, pour la navigation programmatique au-delà des liens, vous pouvez exploiter les méthodes suivantes.

React Router v6.6.1 et versions ultérieures : useNavigate Hook

Utilisez le hook useNavigate comme suit :

import { useNavigate } from "react-router-dom";

function HomeButton() {
  const navigate = useNavigate();

  function handleClick() {
    navigate("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

React Router v5.1.0 et supérieur : useHistory Hook

Pour les composants fonctionnels, pensez au hook useHistory :

import { useHistory } from "react-router-dom";

function HomeButton() {
  const history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

React Router v4 : approches multiples

1. avec le composant d'ordre supérieur du routeur

Injecter le objet history en tant qu'accessoire de composant :

import { withRouter } from "react-router-dom";

const Button = withRouter(({ history }) => (
  <button
    type="button"
    onClick={() => { history.push("/new-location") }}
  >
    Click Me!
  </button>
));

2. Composition et itinéraire rendu

Rendez un itinéraire sans chemin qui correspond toujours à l'emplacement actuel, en fournissant les méthodes d'historique via l'historique prop :

import { Route } from "react-router-dom";

const Button = () => (
  <Route
    render={({ history }) => (
      <button
        type="button"
        onClick={() => { history.push("/new-location") }}
      >
        Click Me!
      </button>
    )}
  />
);

3. Context

Historique d'accès via l'API React Context :

const Button = (props, context) => (
  <button
    type="button"
    onClick={() => {
      context.history === history.push === history.push;
      context.history.push('/new-location')
    }}
  >
    Click Me!
  </button>
);

Button.contextTypes = {
  history: PropTypes.shape({
    push: PropTypes.func.isRequired
  })
};

Pour plus de simplicité, nous vous recommandons d'utiliser le composant d'ordre supérieur withRouter ou de restituer un itinéraire sans chemin avec composition.

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!