disable back button in react-router 2

Question

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.

Answer 1

Applying all these hacks the URL changes to login for a moment and then to wherever-we-push. Instead, what we can do is: In login, where api endpoint returns success, do:

history.replace('/Whatever_screen')

This will remove login screen from window.history stack, and the screen will not flicker.

Answer 2

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.