时间戳

首页 > 解决方案 > 浏览器后退按钮可反转到以前的 redux 状态

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

问题描述

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

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

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

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

沙盒

感谢任何帮助

标签： reactjsreduxreact-reduxreact-router-dom

解决方案

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


const location = useLocation();

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

推荐阅读