javascript - 仅在 react 中阻止特定页面的浏览器后退按钮

Question

我试图仅在 react redux 项目中阻止特定页面的浏览器后退按钮。假设我有四页。
http://localhost:3000/abc/#/page1 ,
http://localhost:3000/abc/#/page2 ,
http://localhost:3000/abc/#/page3
和 http://localhost:3000/abc/#/page4
ETC

对于除 page4 之外的所有页面，用户都可以来回移动。 .一旦用户访问了page3并单击了下一步按钮他无法返回。

我尝试了多种选择，但都没有按预期工作。下面的代码按我的预期工作，但它阻止浏览器返回所有页面。

componentDidMount() {
   window.history.pushState(null, document.title, window.location.href);
   window.addEventListener('popstate', function (event){
       window.history.pushState(null, document.title,  window.location.href);
   });
}

Answer 1

如果您使用 react-router或 react-router-dom然后您可以根据当前路由路径有条件地禁用浏览器的后退按钮。

您可以使用withRouter来自 react-router 的高阶组件或 react-router-dom ，如果您的组件不是直接路由组件。

componentDidMount() {
   const { match } = this.props;
   if(match.url === "/abc/#/page4"){
     window.history.pushState(null, document.title, window.location.href);
     window.addEventListener('popstate', function (event){
        window.history.pushState(null, document.title,  window.location.href);
     });
   }      
}