2022.8.9 react-router-dom新版路由跳转useNaviate()

41 阅读1分钟
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>
  );
};

注: navigate(-1) 则为跳转上一个路由
state路由传参: navigate(path, {state:{}})
state接受参数: useLocation()

image.png