在React-router中拦截/处理浏览器的后退按钮？
我正在使用Material-ui的选项卡，这些选项卡是受控的，并且将它们用于（React-router）链接，如下所示：
<Tab value={0} label="dashboard" containerElement={<Link to="/dashboard/home"/>}/>
<Tab value={1} label="users" containerElement={<Link to="/dashboard/users"/>} />
<Tab value={2} label="data" containerElement={<Link to="/dashboard/data"/>} />
如果我正在访问仪表板/数据并且单击浏览器的后退按钮，则可以转到仪表板/用户（例如），但突出显示的选项卡仍停留在仪表板/数据上（值= 2）
我可以通过设置状态来更改，但是当按下浏览器的后退按钮时，我不知道如何处理该事件？
我发现了这一点：
window.onpopstate = this.onBackButtonEvent;
但这在每次状态更改时都会调用（不仅在返回按钮事件发生时）
问题答案：
这是我最终做的事情：
componentDidMount() {
this._isMounted = true;
window.onpopstate = ()=> {
if(this._isMounted) {
const { hash } = location;
if(hash.indexOf('home')>-1 && this.state.value!==0)
this.setState({value: 0})
if(hash.indexOf('users')>-1 && this.state.value!==1)
this.setState({value: 1})
if(hash.indexOf('data')>-1 && this.state.value!==2)
this.setState({value: 2})
}
}
}
谢谢大家的帮助
-
问题内容： 当用户登录时，将存储会话信息。当用户注销时，会话信息将被删除。但是当我点击浏览器的后退按钮时，会显示用户信息。由于会话已消失，但我们无法确定是否执行了用户登录操作。我该如何解决这个问题？ 问题答案： 我用这种方法。首先创建一个实现Filter的类并重写doFilter（）方法。doFilter（）的代码是： 之后在web.xml中使用过滤器。这个过滤器就是这个。
-
问题内容： 我在www.darknovagames.com上运行了基于浏览器的游戏。最近，我一直在努力使用CSS重新格式化该网站，试图让其所有页面都根据HTML标准进行验证。 我一直在想着要在页面左侧放置AJAX导航菜单的想法（而不是每次都将用户带到一个单独的页面，而是需要重新加载标题和导航栏，而这几乎是不会改变的），我知道如果这样做，我可能会破坏浏览器中的“前进/后退”按钮。我的问题是，我应该继
-
问题内容： 如何禁用浏览器的“后退”按钮（跨浏览器）？ 问题答案： 这个问题是非常相似，这一个 … 您需要强制缓存过期才能正常工作。将以下代码放在页面代码后面。
-
问题内容： 从一个班级导航到另一个创建的历史记录时，我有两个班级。现在，我想通过提示用户提示是否要离开该页面。到目前为止，我尝试使用in，但不适用于退格按钮和浏览器后退按钮，它仅适用于关闭整个浏览器或特定的浏览器页面使用交叉。它也在重新加载。 我也尝试过使用Javascript，并且可以完美使用。 这是我使用的代码。 JAVASCRIPT： 还有gwt中的其他代码： 我希望在。 问题答案： 我已经
-
问题内容： 我已经建立了一个一页的网站。当用户单击菜单按钮时，内容将使用ajax加载。它工作正常。为了改善SEO并允许用户复制/过去不同内容的URL，我使用 它工作正常。URL更改并且浏览器没有重新加载页面 但是，当用户单击浏览器中的后退按钮时，URL会更改，并且必须加载内容。 我已经做到了，它的工作原理是： 您知道是否有改进此代码的方法吗？ 问题答案： 我所做的是将对象文字传递给页面加载。这样，
-
问题内容： 您如何确定用户是否按下浏览器中的“后退”按钮？ 您如何使用系统在单页Web应用程序内强制使用页内后退按钮？ 到底为什么浏览器后退按钮不触发自己的事件！？ 问题答案： （注意：根据Sharky的反馈，我提供了用于检测退格的代码） 因此，我经常在SO上看到这些问题，并且最近遇到了我自己控制后退按钮功能的问题。在为我的应用程序寻找最佳解决方案（带哈希导航的单页）几天后，我提出了一个简单的，跨