How do you pass data when using the navigate function in react router v6(在使用Reaction路由器V6中的导航功能时,如何传递数据)
本文介绍了在使用Reaction路由器V6中的导航功能时,如何传递数据的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
在v4中,您将执行历史推送(‘/What’,{data}) 然后,绑定到该路由的组件可以通过引用history.Location.State来读取数据对象
现在V6已更改为导航(‘随便’)
如何像以前一样传递数据?
推荐答案
它类似于v4中的操作,有两个参数,第二个参数是具有state
属性的对象。
navigate(
'thepath',
{
state: {
//...values
}
}
})
来自迁移指南:Use navigate instead of history
如果需要替换当前位置而不是推送新位置 在历史记录堆栈上,使用navigate(to, { replace: true })
。如果你 需要状态,请使用navigate(to, { state })
。你可以想到第一个 Arg作为您的Arg导航,另一个Arg作为replace
和state
道具。
要访问使用组件中的路由状态,请使用useLocation
反应挂钩:
const { state } = useLocation();
这篇关于在使用Reaction路由器V6中的导航功能时,如何传递数据的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
沃梦达教程
本文标题为:在使用Reaction路由器V6中的导航功能时,如何传递数据


猜你喜欢
- CSS媒体查询(最大高度)不起作用,但为什么? 2022-01-01
- 如何使用 JSON 格式的 jQuery AJAX 从 .cfm 页面输出查 2022-01-01
- 使用RSelum从网站(报纸档案)中抓取多个网页 2022-09-06
- 400或500级别的HTTP响应 2022-01-01
- Css:将嵌套元素定位在父元素边界之外一点 2022-09-07
- Quasar 2+Apollo:错误:找不到ID为默认的Apollo客户端。如果您在组件设置之外,请使用ProvideApolloClient() 2022-01-01
- addEventListener 在 IE 11 中不起作用 2022-01-01
- Fetch API 如何获取响应体? 2022-01-01
- Flexslider 箭头未正确显示 2022-01-01
- 失败的 Canvas 360 jquery 插件 2022-01-01