如何使用历史钩子传递数据以响应功能组件

Question

>我正在尝试在执行获取查询后实现重定向。 我希望能够使用 React 历史记录将数据传递到下一个组件(页面(。

它会是这样的：

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

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

this.state.data

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

谢谢你的帮助

Answer 1

你传递给history.push的数据本质上并没有像这样绑定到类组件，所以对于类或功能组件，你必须从某个地方访问位置状态，然后将其分配给组件的状态。

如果功能组件是从路由渲染的，它应该接收history作为 prop，然后你可以通过简单地执行类似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 }(;