react-router

react-router-dom路由器自动跳转的实现方式：1、开启对应的js文档；2、根据useNavigate方式手动控制开展路由器自动跳转；3、根据state特性开展路由器传值，并且用useLocation方式获取参数。

本实例教程作业环境：Windows10系统软件、react18.0.0版、Dell G3计算机。

react-router-dom路由器自动跳转如何完成？

React-Router-dom路由器自动跳转

useNavigate

useNavigate方法来手动控制开展路由器自动跳转，能够在各个网页页面中间转换

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

在 CodeSandBox 上试着

replace特性初始值为false，应用{replace:true}这样大家也就不会建立登陆页面历史时间局部变量中的另一个内容。这就意味着当她们抵达受法律保护页面并点击“上一步”按键的时候不会返回登陆页面

state特性开展路由器传值，以params参数方式传送，不容易展示在url后才，页面刷新主要参数会遗失。在别的网页页面我们都是用 useLocation 方式获取参数

强烈推荐学习培训：《react视频教程》

以上就是关于react-router-dom路由器自动跳转如何达到的具体内容，大量欢迎关注AdminJS其他类似文章！