时间戳

首页 > 解决方案 > React Router Dom v4 处理浏览器后退按钮

javascript - React Router Dom v4 处理浏览器后退按钮

问题描述

如何使用react-router-domv4 禁用用户的浏览器后退按钮单击？

我在页面上显示模式，当用户按下浏览器后退按钮时，用户将被带到上一个屏幕，而不是我想简单地关闭模式。

我试着这样做

onBackButtonEvent(event) {
    event.preventDefault();  
    // the user shouldn't be able to move backward or forward  
}
componentDidMount() {
    window.onpopstate = this.onBackButtonEvent;
}

但这并不能阻止用户后退或前进。有没有办法通过这个来处理react-router-dom？

我尝试了多种解决方案，但似乎没有任何效果。

标签： javascriptreactjsecmascript-6react-router-dom

解决方案

我知道这个问题有点老了，但我自己在寻找答案时偶然发现了它。没有干净的方法可以“禁用”后退按钮，但要让用户仅在单击浏览器后退按钮时关闭模式，我发现这可以工作。

只需将历史记录传递给 props 中的模态组件，然后在componentWillUnmount函数上调用以下内容。

componentWillUnmount() {
    this.props.history.goForward();
}

这将无缝地强制浏览器停留在同一页面上但关闭模式（假设它是一个类组件）。

更新：如果使用功能组件，上面的 componentWillUnmount 函数看起来像下面的钩子。

React.useEffect(() => {
    return () => {
            props.history.goForward();
        }
    }, []);

推荐阅读