React，如何在浏览器后退按钮后恢复页面

Question

我正在使用 react 和 material-ui 创建一个简单的搜索表单。 在页面 A 上输入搜索的值（文本输入框、下拉列表、复选框）后，结果显示在页面 B 上。 当我转到页面 B 并返回页面 A 时，如何让页面 A 显示输入的第一个值？ 我能够使用 useHistory() history.push 和 useEffect 将状态设置为我最初输入的值，但文本输入框、复选框和下拉列表保持刷新且为空。 它使用 material-ui 中的复选框、选择和文本字段。

在A页，我使用history.push将A页设置的值转移到B页，当你从B页返回到A页时，我在B页再次使用history.push来转移它到页面 A，然后使用 useEffect 将值设置为 state，以便在页面 A 上再次使用我输入的第一个值。我能够再次使用我在页面 A 上输入的第一个值。

然而，该值只是以编程方式设置的，可见的输入表单仍然是空的。我怎样才能恢复输入表单中的值以及程序中的值？

Answer 1

您可以在使用 history.replaceState

提交表单之前将表单数据存储在 window.history.state 中

这让您可以将任何值存储在历史记录状态中，当您通过单击后退按钮从页面 B 返回到页面 A 时，可以通过 window.history.state 访问该状态。

阅读有关历史状态的更多信息：https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API