Question

我在“ / dashboard”之类的路径上有一个Dashboard.js页面组件，该组件使用户可以通过在URL保持不变（路由不变）的情况下更改其状态来在3个表之间进行导航。我试图为这些状态更改添加浏览器后退/前进按钮支持，但是我一直试图找出如何在用户单击后退/前进按钮时将状态更改推送到历史记录并将其还原到组件中。

在组件中，我尝试将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

在这里回答我自己的问题，但是我认为我在寻找错误的解决方案，因此我想把这条面包屑的痕迹留给其他人以为他们认为需要在其Web应用程序中使用。

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

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

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

这将带来许多好处：

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

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

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

1 个答案: