0

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

它会是这样的：

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

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

this.state.data

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

感谢您的帮助

4

2 回答 2

4

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

如果功能组件是从路由呈现的，它应该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>
}
于 2020-02-14T12:10:42.240 回答
1

您不能直接将状态与历史一起传递，但您可以轻松地传递您想要与历史一起传递的值，例如......

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

于 2020-02-14T12:15:54.633 回答