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

Question

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

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

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

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、从 match.params 中获取值componentDidUpdate(prevProps)并用这些值设置状态来更新状态。

这将带来许多好处：

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

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