如何使用 history hook 传递数据以响应功能组件

Question

我正在尝试在执行提取查询后实现重定向。我希望能够使用 React History 将数据传递到下一个组件（页面）。

它会是这样的：

 const history = useHistory({});
 /* ... */
 history.push({
       pathname: '/page',
       state: { data: data }
 })

然后在接收器中检索状态，假设接收器是基于 class 的组件：

this.state.data

有没有可能用功能组件实现这样的功能？这个问题最干净的解决方案是什么？

感谢您的帮助

Answer 1

您传递给 history.push 的数据并非像那样本质上绑定到 class 组件，因此对于 class 或功能组件，您必须访问来自某处的位置状态，然后将其分配给组件的状态

如果功能组件是从路由渲染的，它应该接收 history 作为道具，然后你可以通过简单地做类似 history.location.state 的事情来获取该数据。然后你可以用它做任何你想做的事并通过 useState

将它分配给状态

我想您也可以使用那个钩子 useHistory 来获取位置状态。

类似于

function MyComponent() {
  const history = useHistory()

  return <div>
    {JSON.stringify(history.location.state)}
  </div>
}

// Rendered via <Route component={MyOtherComponent} />

function MyOtherComponent({ history }) {
  return <div>
    {JSON.stringify(history.location.state)}
  </div>
}

Answer 2

你不能直接通过历史传递状态，但你可以轻松地传递你想通过历史传递的值，比如...

this.props.history.push('export', { value: data.dealer_userid, label: data.user_displayname, nicename: data.user_nicename, invid: data.dealer_invid, date: date });

如何使用 history hook 传递数据以响应功能组件

How to pass data with history hook to react functional components

state

reactjs

react-router

react-hooks

react-functional-component