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.

回答1:

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.

回答2:

it's not possible to disable browser buttons. my advice is to redirect user back to dashboard page if he/she is logged

回答3:

Applying all this hacks I see url change to 'login' for a tiny bit moment and then to 'wherever-we-push' . Instead what we can do is-> In login, where api hit success, do: history.replace('/Whatever_screen'). This will remove login screen from window.history stack.

回答4:

Actually you can't disable back button. You can use a hack by preventing browser's "back" action. Just add to your Dashboard component compnentWillMount() lifecycle method some code that will trigger browser's "forward" action:

componentWillMount() {
   setTimeout(() => {
     window.history.forward()
   }, 0)
   window.onunload=function(){null};
}

But most probably a better solution would be some redirection based on users logged state.

回答5:

On your page which you want to disable back (example, on LoginApp ) add this block, to disable web history back

componentDidMount() {
    window.history.pushState(null, document.title, window.location.href);
    window.addEventListener('popstate', function (event){
        window.history.pushState(null, document.title,  window.location.href);
    });
}

回答6:

in your login screen add replace to /dashboard

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom'
import createBrowserHistory from 'history/createBrowserHistory'
const history = createBrowserHistory()

class LoginPage extends Component {
    componentDidMount(){
        history.replace({ pathname: '/dashboard' })
    }
    render() {
        const { history } = this.props
        return (
            <div>
            <h1>Login Page</h1>
            <button onClick={() => {
              login().then(() => {
                history.push('/dashboard')
              })
            }}>Login</button>
          </div>
        );
    }
}

export default withRouter(LoginPage);

The reason is replace your current path (/login) to /dashboard. Before adding this, please make sure you setup your authentication correctly.

回答7:

In order to improve the code reusability, we can add an event listener in our index.html and dispatch the browser back disable event from all of our componentDidMount() methods.

In the index.html,

window.addEventListener('navigationhandler', function (e) {
  window.history.pushState(null, document.title, window.location.href);
  window.addEventListener('popstate', function (event) {
    window.history.pushState(null, document.title, window.location.href);
  });
});

In React componentDidMount() method,

componentDidMount() {
   window.dispatchEvent(new CustomEvent("navigationhandler"));
}

来源：https://stackoverflow.com/questions/36141470/disable-back-button-in-react-router-2

标签

javascript

reactjs

react-router