本教程操作环境:windows10系统、React18.0.0版、Dell G3电脑。react-router-dom路由跳转怎么实现?React-Router-dom路由跳转useNavigateuseNavigate方法可以手动操作进行
本教程操作环境: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>
);
};
attribute | 描述 |
---|---|
replace | 路由历史,当值为 true 时,不创建历史条目 |
state | 路由传值,传params参数 |
在 CodeSandBox 上尝试
replace属性默认值为false,使用{replace:true}这样我们就不会创建登录页面历史堆栈中的另一个条目。这意味着当他们到达受保护的页面并单击“上一步”按钮时不会回到登录页面
state属性进行路由传值,以params参数的形式传递,不会显示在url后方,页面刷新参数会丢失。在其他页面我们是用 useLocation 方法获取参数
以上就是react-router-dom路由跳转怎么实现的详细内容,更多请关注编程网其它相关文章!
--结束END--
本文标题: react-router-dom路由跳转怎么实现
本文链接: https://www.lsjlt.com/news/206240.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2023-05-25
2023-05-25
2023-05-25
2023-05-25
2023-05-25
2023-05-24
2023-05-24
2023-05-24
2023-05-24
2023-05-24
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0