Reactjs “浏览器后退”按钮可反转到上一个重复使用状态

我有一个来自create reat App的应用程序。非常简单的应用程序与导航菜单元素和内容元素。当我单击导航菜单中的按钮时，仪表板元素将加载到内容元素中。一切都很顺利。然后我引入了react路由器，这样所有的更改都不会刷新浏览器。到目前为止一切顺利

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

我已经试过了，并且写过多篇关于这个的文章，也看过stackoverflow，但仍然无法做到这一点

我已经为此创建了我的第一个沙盒，这样您就可以了解它是如何设置的。我肯定我做了一些根本性的错误，但我不知道是什么：-）

---

感谢您的帮助

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

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

每当组件卸载时，

cleanup

功能就会运行，例如，您单击导航栏上的其他页面

如果您不使用函数组件，我认为

componentWillUnmount（）

函数与此等效。

使用钩子来监听位置更改

const location = useLocation();

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

---

您忘记了依赖项列表

[]

。这将在每个渲染上运行。@wvdz您是对的，对不起，这将修复它，非常好，谢谢。因此，我确实摆脱了连接路由器和redux第一历史依赖关系。传奇