如何使用浏览器的后退/前进按钮来导航React状态更改历史记录

Question

我有一个Dashboard.js页面组件，位于路径"/dashboard"，它通过改变其状态让用户在3个表格之间导航，同时URL保持不变（路由没有改变）。我正在尝试为这些状态更改添加浏览器的前进/后退按钮支持，但我被困在如何将状态更改推送到历史记录并在用户单击后退/前进按钮时在组件中恢复它们的问题上。

在我的组件内部，我尝试在一个执行setState()的主要函数中添加this.props.history.push(this.props.location.path, this.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
  }
}

如果示例代码过于模糊，我很抱歉，我的组件文件很大，我不知道包含什么相关内容。提前感谢您的帮助。

- JackRabbit

Answer 1

在这里回答自己的问题，但我认为我正在寻找错误的解决方案，并希望为任何认为在其Web应用程序中需要此功能的人留下此面包屑。

我意识到最好在用户浏览表格时更改URL。即使组件相同，我仍然可以通过路由路径传递一堆可选参数，例如：

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

然后，我将通过设置新的URL，在componentDidUpdate(prevProps)中获取match.params的值，并使用这些值来更新状态。这样做有很多好处：

• 通过history.push更改URL会自动创建历史记录，您可以使用后退/前进按钮遍历历史记录
• 状态将与此历史记录同步，因为值来自于URL
• 我可以选择在URL中包含哪些详细信息，包括重要的内容，如“哪个表格”，但不包括次要的内容，如“排序列”
• 最重要的是，人们将能够相互分享指向仪表板精确部分的链接。这符合“特定URL应始终指向特定页面”的原则。我意识到，即使这些不同的仪表板表格都是从单个组件呈现的，它们对用户来说确实算作不同的“页面”，用户应该能够使用正确的URL直接链接到它们。

编辑：解决方案按照描述的方式工作。这绝对是正确的方法，它大大降低了我的代码复杂性。

- JackRabbit