Bagaimana untuk melaksanakan lompat laluan react-router-dom

Kaedah pelaksanaan lompat laluan react-router-dom: 1. Buka fail js yang sepadan 2. Kendalikan lompat laluan secara manual melalui kaedah useNavigate; mendapat parameter.

Persekitaran pengendalian tutorial ini: Sistem Windows 10, bertindak balas versi 18.0.0, komputer Dell G3.

Bagaimana untuk melaksanakan lompat laluan dalam react-router-dom?

Lompat laluan React-Router-dom

useNavigate

Kaedah useNavigate boleh dikendalikan secara manual untuk lompat laluan dan boleh bertukar antara halaman berbeza

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>
  );
};

attribute	描述
replace	路由历史，当值为 true 时，不创建历史条目
state	路由传值，传params参数

Cubalah pada CodeSandBox

Atribut ganti menjadi lalai, gunakan {replace:true} supaya kami tidak membuat entri lain dalam timbunan sejarah halaman log masuk . Ini bermakna mereka tidak akan dibawa kembali ke halaman log masuk apabila mereka sampai ke halaman yang dilindungi dan klik butang "Sebelumnya" Kemudian, parameter muat semula halaman akan hilang. Pada halaman lain, kami menggunakan kaedah useLocation untuk mendapatkan parameter

Pembelajaran yang disyorkan: "

tutorial video bertindak balas

"

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan lompat laluan react-router-dom. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!