Question

在 React Router V6 中使用导航功能时如何传递数据

2021-10-25

61848

javascript reactjs react-router-dom

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

现在，在 v6 中，该操作已更改为 navigation('whatever')

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

Answer 1

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

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

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

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

要访问使用组件中的路由状态，请使用 useLocation React 钩子：

const { state } = useLocation();