浏览器后退按钮可反转到以前的 redux 状态答案

【问题标题】：Browser back button to reverse to previous redux state浏览器后退按钮可反转到以前的 redux 状态
【发布时间】：2021-04-24 16:42:56
【问题描述】：

我有一个来自 create-reat-app 的应用程序。带有导航菜单元素和内容元素的非常简单的应用程序。当我单击导航菜单仪表板元素中的按钮时，将加载到内容元素中。一切都很完美。然后我引入了 react-router，所以所有的变化都发生在没有刷新浏览器的情况下。到目前为止一切顺利。

然后我开始玩 redux。左侧导航适用于某些业务分支（即伦敦、伯明翰）。单击一个后，其 id 将保存到 page.currentBranch 下的 redux 存储中。然后仪表板元素将根据 redux 中的内容呈现。单击每个按钮时都可以正常工作，但是当单击后退或前进按钮时，URL 会发生变化，但仪表板仍会显示上次单击按钮的信息，因为 redux 商店在浏览器后退或前进按钮上没有更改。

我已经尝试过connected router、redux first history 和多篇关于此的文章，并查看了 stackoverflow 但仍然无法完成这项工作

我为此创建了我的第一个沙盒，以便您了解它是如何设置的。我确定我做错了什么，但不知道是什么:-)

sandbox

感谢任何帮助

【问题讨论】：

标签： reactjs redux react-redux react-router-dom

【解决方案1】：

使用useLocation 挂钩监听位置变化。


const location = useLocation();

useEffect(() > {
  //...Update redux accordingly
}, [location]);

【讨论】：

太棒了，谢谢。所以我也确实摆脱了连接路由器和 redux-first-history 依赖项。图例

【解决方案2】：

您可以尝试使用 useEffect 挂钩并将 redux 状态删除/重置为所需状态：

useEffect(() => {
    return function cleanup() { restartReduxState() };  
}, []);

cleanup 函数将在组件卸载时运行，例如，您单击导航栏上的不同页面。

如果你不使用函数组件，我认为componentWillUnmount() 函数是等价的。

【讨论】：

你忘记了依赖列表[]。这将在每次渲染时运行。