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

  参数

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

  在 CodeSandBox 上尝试
  replace属性默认值为false，使用{replace:true}这样我们就不会创建登录页面历史堆栈中的另一个条目。这意味着当他们到达受保护的页面并单击“上一步”按钮时不会回到登录页面
  state属性进行路由传值，以params参数的形式传递，不会显示在url后方，页面刷新参数会丢失。在其他页面我们是用 useLocation 方法获取参数