仅在反应中阻止特定页面的浏览器后退按钮

时间:2019-08-26 10:10:58

标签: javascript reactjs react-router-v4

我试图仅在react redux项目中阻止特定页面的浏览器后退按钮。可以说我有四页。

http://localhost:3000/abc/#/page1

http://localhost:3000/abc/#/page2

http://localhost:3000/abc/#/page3

http://localhost:3000/abc/#/page4

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

1 个答案:

答案 0 :(得分:0)

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

如果您的组件不是直接路由组件,则可以使用withRouterreact-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);
     });
   }      
}