Question

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

<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);
   }
 };

这有2个问题：

如果这是您登陆的第一页，则实际上没有任何作用，该功能不会触发
如果您在其他站点上，并导航到包含抽屉的URL，则单击Back（后退）会将您转到另一个URL（不同的域）

我还尝试在<Route/>中设置一个ComponentC，然后抽屉就放在那儿了，但是我没有设法使它工作，也许路径是错误的。感觉这也许是正确的方法，如果path为/path1，则抽屉位于/path1/drawer或/path2/drawer等内。

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

Answer 1

我认为您应该在此处使用道具而不是路径，所以类似/path1?drawer=1，但是您肯定需要使用历史记录/位置，以便“后退”按钮可以实际返回，因此您位于右侧足迹。

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

在React 16 / Router V4中显示抽屉时，如何覆盖“后退”按钮

1 个答案: