时间戳

首页 > 解决方案 > React 16 / Router V4中显示抽屉时如何覆盖后退按钮

reactjs - React 16 / Router V4中显示抽屉时如何覆盖后退按钮

问题描述

我有这样的结构，有这样的路线：

<Route path="/sample-route" component={ComponentA}/>

然后ComponentA有：

<ComponentA>
  <ComponentB/>
  <ComponentC>
    <MaterialUIDrawer/>
  </ComponentC>
</ComponentA>

ComponentC小时候在 5 种不同的路线中使用。这MaterialUIDrawer是基于 redux reducer 中的标志显示的。我要解决的问题是当抽屉打开时，单击后退会隐藏它，但也会导航回来。我试着像这样解决它：

window.onpopstate = (e) => {
   if (this.props.isOpen) {
     this.props.toggleDrawer(false);
     this.props.history.replace(this.props.match.url);
   }
 };

这有两个问题：

我也尝试设置一个<Route/>，ComponentC然后抽屉就在那里，但我没有设法让它工作，也许路径是错误的。感觉这可能是正确的方法，如果 path 是/path1，那么抽屉住在/path1/drawer, 或/path2/drawer, 等等。

我试图找到一种方法让浏览器中的后退按钮关闭抽屉（因此执行我定义的函数）并覆盖默认功能。

标签： reactjsrouter

解决方案

我认为您应该在这里使用道具而不是路径，例如/path1?drawer=1，但是您肯定需要使用历史记录/位置，以便后退按钮实际上可以返回，因此您走在正确的道路上。

我不确定您将什么用于浏览器历史记录管理器，但我建议不要使用它，而不是依靠窗口弹出状态。您的历史模块应该是事实的来源并提供 redux，而不是与 IMO 相反。

推荐阅读