ShakaCode | ShakaCode Blog | Rails On Maui Blog | Rails | ReactJs | JavaScript | Webpack | Productivity |

How to browse back button in React Router Dom v4?


#1

Hi guys,

Please give me some advice…

How do I disable a browser back button click from user using react-router-dom v4?

I am showing a modal on a page and when the user presses browser back button then the user is taken to the previous screen, instead I want to simply close the modal.

I tried doing this

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

But this doesn’t prevent the user from going backward or forward. Is there a way to handle this via react-router-dom?

I have tried multiple solutions but nothing seems to work. Please help me choosing the right path.

Thanks in advance.
Sarika


#2

I don’t believe you can fully disable a browser back button. You can, however, prevent the browser from carrying out the ‘back’ action.

history.pushState(null, null, location.href);
    window.onpopstate = function () {
        history.go(1);
    };

Something along those lines should work. Let me know if this solves your problem!


#3

Hi @splashinn,

I appreciate everything you have added to my knowledge base. Admiring the time and effort you put into this questions… Definately, I will try this and let you know that this clarify my problem or not.

Thanks