Search code examples
javascriptreactjsreact-router

disable back button in react-router 2

I am using react-router 2. My routes are defined as 

   <Route path="/" component={App}>
       <IndexRoute component={Home}/>
       <Route path="/about" component={About}/>
       <Route path="/login" component={Login} onEnter={redirectToDashboard}/>
       <Route path="/logout" component={Logout} onEnter={logoutSession}/>
       <Route path="/dashboard" component={Dashboard} onEnter={redirectToLogin}/>
   </Route>

Everything working fine but I am having problem disabling back button from my dashboard page.

After successful login I am redirecting user to dashboard page but when user clicks back button it goes to login page again. I want to disable back button of browser when user is on dashboard page.

Solution

  • Your best bet, is when the user is login he/ she is redirected to dashbaord. if for some reason the user click on back button you should:

    if the user is logged in stay on the page dashboard

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

    it will be not possible to go back.