在使用Reaction路由器V6中的导航功能时,如何传递数据

2022-04-02 00:00:00 reactjs javascript react-router-dom

在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作为replacestate道具。

要访问使用组件中的路由状态,请使用useLocation反应挂钩:

const { state } = useLocation();

相关文章