reactjs - 如何在 React Router v4 中操作历史记录？

Question

我正在使用:

React、Redux、React-Router、Meteor

以下情况:

我有一个带有两个选项卡的模态，基于所选选项卡，内容区域中将显示不同的选择列表，选择一个选择将给出子选择列表(全部在模态内)。

期望的行为:

我希望用户能够使用浏览器的后退按钮“撤消”点击其中一个选项卡或选择一个选项。

我到目前为止没有成功的尝试:

1. 使用 withRouter HOC 包装我的组件，这样我就可以访问历史记录。然后我会使用 history.push(currentUrl,{selectedTab:selection})-> 问题:推送的状态未存储在此历史位置对象中，而仅存储在与我的根组件相关联的历史对象的状态中(在树的更上层)

2. (到目前为止更有前途)只需将我用 createHistory 创建的历史导入另一个模块，然后在构建时将其放入组件状态。然后我会使用 this.state.history.push(currentUrl,{selectedTab:selection}) 访问 push 方法，它工作正常，我可以在 this.state 下找到推送状态.history.location.state.selectedTab。但是，使用浏览器的后退按钮不会导致重新呈现，因此选择将保持不变。

有什么想法吗？

干杯

Answer 1

您可以采用的另一种方法是将查询参数与 React 路由器一起使用。并在您的组件中根据查询参数更改选项卡。由于 url 已更改，您应该会获得所需的默认行为。