react-router-dom ^6.0.0 怎样动态跳转页面以及传递参数

发布时间:2022-07-01 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了react-router-dom ^6.0.0 怎样动态跳转页面以及传递参数脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

前因: react-router-dom ^6.0.0  移除了 useHistory 这个Hook, 以至于动态跳转页面变得困难。 幸好提供了 useNavigate 这个新的hook.

例子:

import { useNavigate } from 'react-router-dom';
// 在组件里面
const navigate = useNavigate();
// 通过navigate() 跳转页面,参数可以放在state里。
navigate('/your-route-path', { state: { object: object}});
// 下个页面获取state.
import { useLocation } from 'react-router-dom';
let location = useLocation();
const { object } = location.state;

这样就可以实现页面带参数的动态的跳转。

脚本宝典总结

以上是脚本宝典为你收集整理的react-router-dom ^6.0.0 怎样动态跳转页面以及传递参数全部内容,希望文章能够帮你解决react-router-dom ^6.0.0 怎样动态跳转页面以及传递参数所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: