How to browse back button in React Router Dom v4?

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) {
// 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.

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 () {

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

1 Like

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.


You could create a new Route for your modal and keep it outside of your Switch . This way regular navigation will still apply, and you can also render the modal on top of what is rendered in your Switch .


function Home() {
  return <div> Home </div>;

function MyRoute() {
  return (
      <Link to="/myroute/edit"> Edit </Link>
        render={({ history }) => (
          <ModalComponent history={history}>
            Welcome to the MyRoute edit screen

class ModalComponent extends React.Component {
  onClick = e => {

  render() {
    return (
      <Modal isOpen>
        <h1> {this.props.children} </h1>
        <Link to="/myroute" onClick={this.onClick}>

function App() {
  return (
        <Link to="/"> Home </Link>
        <Link to="/myroute"> My Route </Link>
          <Route exact path="/" component={Home} />
          <Route path="/myroute" component={MyRoute} />

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Selenium/ Python Developer