2016-03-21 8 views
2

Ich reagiere-Router bin mit 2. Meine Routen sind definiert alsdeaktivieren Zurück-Taste in reagieren-Router 2

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

Alles funktioniert gut, aber ich Problem habe von meiner Dashboardseite deaktivieren Zurück-Taste.

Nach der erfolgreichen Anmeldung ich Benutzer auf Dashboard-Seite umleiten, aber wenn Benutzer auf Zurück-Taste klickt, geht es wieder auf die Anmeldeseite. Ich möchte die Zurück-Taste von browser deaktivieren, wenn sich der Benutzer auf der Dashboard-Seite befindet.

Antwort

8

Ihre beste Wette ist, wenn der Benutzer sich anmeldet, wird er/sie zu Dashbaord umgeleitet. wenn aus irgendeinem Grunde Taste der Benutzer auf zurück sollten Sie:

, wenn der Benutzer in Aufenthalt auf der Seite Dashboard angemeldet ist

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

wird es nicht möglich sein, wieder zu gehen.

2

Es ist nicht möglich, Browser-Schaltflächen zu deaktivieren. mein Rat ist, Benutzer zu Dashboard-Seite zu umleiten zurück, wenn er/sie

2

angemeldet ist Eigentlich kann man nicht deaktivieren zurück Taste. Sie können einen Hack verwenden, indem Sie die Aktion "zurück" des Browsers verhindern. einige Code fügen Sie einfach zu Ihrem Dashboard Komponente compnentWillMount() Lifecycle-Methode, die den Browser „vorwärts“ Aktion auslösen soll:

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

Aber die meisten wahrscheinlich eine bessere Lösung wäre, einige Umleitung basierend auf den angemeldeten Zustand.

Verwandte Themen