javascript - Prevent browser back button for a specific page only in react - Stack Overflow

admin管理员组

文章数量:1345295

I am trying to prevent browser back button for a specific page only in react redux project. Lets say I have four pages.

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

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

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

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

etc

For all the pages user can go back and forth except page4. Once user has visited page3 and clicked the next button he can not go back.

I have tried multiple options but none of them is working as expected. Below code is working as per my expectation but its blocking browser back for all the pages.

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

I am trying to prevent browser back button for a specific page only in react redux project. Lets say I have four pages.

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

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

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

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

etc

For all the pages user can go back and forth except page4. Once user has visited page3 and clicked the next button he can not go back.

I have tried multiple options but none of them is working as expected. Below code is working as per my expectation but its blocking browser back for all the pages.

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

• javascript
• reactjs
• react-router-v4

Share Follow edited Aug 26, 2019 at 10:24 Dharman♦ 33.4k2727 gold badges101101 silver badges147147 bronze badges asked Aug 26, 2019 at 10:10 Ravi Kant MishraRavi Kant Mishra 76811 gold badge77 silver badges1414 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

If you are using react-router or react-router-dom then you can conditionally disable back button for browser based on current route path.

You can use withRouter Higher order ponent from react-router or react-router-dom, if your ponent is not a direct route ponent.

ponentDidMount() {
   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);
     });
   }      
}

You can do it using react-router-dom

import { useHistory } from "react-router-dom";

let history = useHistory();
history.replace("/login");

If you want to do it in logout function :

const logoutClicked = () => {
    localStorage.clear(); //if you want to clear localstorage data
    history.replace("/login"); //redirect to login
  };

If react-router-dom is version >6, use useNavigate instead of useHistory:

import { useNavigate } from "react-router-dom";
const navigate = useNavigate();
navigate("/login");

本文标签： javascriptPrevent browser back button for a specific page only in reactStack Overflow