Comment implémenter le saut de route React-Router-Dom

La méthode d'implémentation du saut de route réagissez-router-dom : 1. Ouvrez le fichier js correspondant ; 2. Exécutez manuellement le saut de route via la méthode useNavigate ; 3. Passez la valeur de la route via l'attribut state et utilisez la méthode useLocation ; pour obtenir les paramètres.

L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 18.0.0, ordinateur Dell G3.

Comment implémenter le saut d'itinéraire dans React-Router-Dom ?

Saut d'itinéraire React-Router-dom

useNavigate

La méthode useNavigate peut être utilisée manuellement pour le saut d'itinéraire et peut basculer entre différentes pages

import { FunctionComponent } from "react";
import { useNavigate } from "react-router-dom";
import { Button } from "antd";
export const Login: FunctionComponent = () => {
  const navigate = useNavigate();
  const login = () => {
    navigate("/"); // 向 navigate 方法中传入要跳转的 path 路径
  };
  return (
    <div>
      Login
      <Button type="primary" onClick={login}>
        登录
      </Button>
    </div>
  );
};

Essayez CodeSandBox

La valeur par défaut de l'attribut replace est false, utilisez { replace:true} afin que nous ne créions pas une autre entrée dans la pile d'historique de la page de connexion. Cela signifie que lorsqu'ils atteignent la page protégée et cliquent sur le bouton "Précédent", ils ne seront pas redirigés vers la page de connexion

L'attribut state est routé et passé en tant que paramètre params, qui ne sera pas affiché derrière l'url et la page est actualisée. Les paramètres seront perdus. Sur d'autres pages, nous utilisons la méthode useLocation pour obtenir les paramètres

Apprentissage recommandé : "Tutoriel vidéo React"

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!