javascript - 在 react router v6 中使用导航功能时如何传递数据

Question

在 v4 中，你会做一个 history.push('/whatever', { data })
然后绑定(bind)到该路由的组件可以通过引用 history.location.state 来读取数据对象
现在使用 v6 更改为 navigation('whatever')
你如何像以前一样传递数据？

Answer 1

它类似于 v4 中的做法，两个参数，第二个是带有 state 的对象。属性(property)。

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

来自迁移指南: Use navigate instead of history

If you need to replace the current location instead of push a new oneonto the history stack, use navigate(to, { replace: true }). If youneed state, use navigate(to, { state }). You can think of the firstarg to navigate as your and the other arg as the replaceand state props.

要访问消费组件中的路由状态，请使用 useLocation react 钩子(Hook):

const { state } = useLocation();