如何使用浏览器 back/forward 按钮导航 React 状态变化历史

Question

我有一个 Dashboard.js 页面组件位于像“/dashboard”这样的路径，它允许用户通过改变其状态在 3 个表之间导航，而 URL 保持不变（路由不是改变）。我正在尝试为这些状态更改添加浏览器 back/forward 按钮支持，但我一直在尝试弄清楚如何将状态更改推送到历史记录并在用户单击 [=23] 时在组件中恢复它们=] 按钮。

在我的组件中，我尝试将 this.props.history.push(this.props.location.path, this.state) 添加到执行 setState() 的主要功能之一，以查看是否允许后退按钮导航。它肯定会添加到历史记录中，因为现在我可以在它离开页面之前按几次后退按钮，但页面看起来是一样的（组件不会恢复旧状态）。当按下后退按钮时，如何以及在何处制作组件 "restore the old state"？

这是我的组件结构的基本示例：

class Dashboard extends Component {
  state = {
    // table data, current table, etc.
  }

  componentDidMount() {
    // get records from db, set state
  }

  navigateExample() {
    // various functions like this one set state,
    // basically navigating between tables
    this.props.history.push(this.props.location.path, this.state) // <--here?
    this.setState({ table: newTable })
  }

  render() {
    // renders different table components depending on state
  }
}

如果示例代码太模糊，我深表歉意，我的组件文件很大，我不知道要包含什么相关内容。在此先感谢您的帮助。

Answer 1

在这里回答我自己的问题，但我相信我一直在寻找错误的解决方案，我想把这条面包屑痕迹留给其他认为他们在网络应用程序中需要它的人。

我意识到在用户浏览表格时更改 URL 实际上会更好。即使组件相同，我也可以像这样通过路由路径传入一堆可选参数：

<Route path="/dashboard/:table?/:group?/:classID?" component={Dashboard} />

然后我将通过设置新的 URL 来更新状态，从 componentDidUpdate(prevProps) 中获取 match.params 的值并使用这些值设置状态。

这会有很多好处：

通过 history.push 更改 URL 会自动创建您可以使用 back/forward 按钮遍历的历史记录
状态将与此历史记录同步，因为值来自 URL
我可以选择要包含在 URL 中的详细程度，包括 "which table" 等重要内容，但不包括 "sort column"
最重要的是，人们将能够彼此共享 link 到仪表板的确切部分。这遵循"a particular URL should always point to a particular page"的原则。我意识到，即使这些不同的仪表板表格都是从单个组件呈现的，但它们对用户来说确实算作不同的 "pages"，用户应该能够 link 直接向他们使用正确的 URL.

编辑：解决方案按描述工作。这绝对是要走的路，它大大降低了我代码的复杂性。

如何使用浏览器 back/forward 按钮导航 React 状态变化历史

How to use browser back/forward buttons to navigate React state change history

history.js

reactjs

react-router