How to browse back button in React Router Dom v4?

ReactJS
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!

1 Like
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

4

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 .

**Example

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

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

class ModalComponent extends React.Component {
  onClick = e => {
    e.preventDefault();
    this.props.history.goBack();
  };

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

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

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

Thanks,
Sailaja
Selenium/ Python Developer

3 Likes