React Router v6中使用navigate功能时如何传递数据

Question

在 v4 中，您将执行 History.push('/whatever', { data }) 然后绑定到该路由的组件可以通过引用 History.location.state 来读取数据对象

现在使用 v6 更改为导航（'whatever'）

你如何像以前一样传递数据？

Answer 1

它与 v4 中的做法类似，有两个参数，第二个参数是具有state属性的对象。

navigate(
  'thepath',
  {
    state: {
      //...values
    }
  }
})

来自迁移指南：使用导航而不是历史记录

如果您需要替换当前位置而不是将新位置推送到历史堆栈上，请使用navigate(to, { replace: true }). 如果您需要状态，请使用navigate(to, { state }). 您可以将要导航的第一个 arg 视为您的，将另一个 arg 视为replace 和stateprops。

要访问使用组件中的路由状态，请使用useLocationReact hook：

const { state } = useLocation();