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

Question

如何使用 react-router-dom v4 禁止用户点击浏览器后退按钮？

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

我试过这样做

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

但这并不妨碍用户后退或前进。有没有办法通过 react-router-dom 来处理这个问题？

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

Answer 1

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

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

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

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

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

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