Reagieren Router - Umleitung nach dem Login

Question

Könnten Sie mir bitte helfen, den Umleitungsmechanismus zu verstehen, den ich mit der neuesten Version von Reagieren Router (v1.1.0) verwenden könnte. Ich würde gerne auf eine url umleiten je nach Erfolg oder Misserfolg von Benutzeranmeldung. Ich habe versucht, folgendes zu tun Zuerst erstellte eine Geschichte mit.

let history = createBrowserHistory(); 

dann versucht, den Zustand mit

history.pushState(null, 'abc') 

Nichts geschieht zu drücken. Könnten Sie bitte lassen Sie mich wissen, die richtige Art, Übergänge zu tun. Von den Dokumenten habe ich verstanden, dass transitionTo() API nicht in den neuesten Versionen vorhanden ist. Es wird toll, wenn Sie auf ein einfaches Arbeitsbeispiel zeigen könnten.

Vielen Dank im Voraus.

Answer 1

Sie können "Hooks" auf Ihren Routen registrieren, die beim Betreten und Verlassen der Routen ausgelöst werden. Überprüfen Sie die Dokumentation für onEnter and onLeave hooks. .

Es gibt auch eine example of requiring auth auf einer Strecke und auf einen anderen Pfad umgeleitet, wenn der Benutzer nicht angemeldet ist

Hier ist ein Ausschnitt aus dem Auth Beispiel innerhalb app.js erfordern genommen:

function requireAuth(nextState, replaceState) { 
    if (!auth.loggedIn()) 
    replaceState({ nextPathname: nextState.location.pathname }, '/login') 
} 

// And from the route configuration, use the requireAuth function in onEnter... 
<Router history={history}> 
    <Route path="/" component={App}> 
    <Route path="login" component={Login} /> 
    <Route path="logout" component={Logout} /> 
    <Route path="about" component={About} /> 
    <Route path="dashboard" component={Dashboard} onEnter={requireAuth} /> 
    </Route> 
</Router> 

Die nextState und replaceState Argumente sind Objekte aus rackt/history und werden in die Methode injiziert, die Sie in onEnter übergeben.

Answer 2

@terranmoccasins Antwort ist korrekt. Es gibt jedoch eine gemeinsame Notwendigkeit, sehr wenige Beispiele zu adressieren.

Angenommen, Sie müssen mehrere Routen sichern (dashboard1, dashboard2, ...). Wie leiten Sie nach erfolgreicher Anmeldung zurück zur ursprünglichen Seite? Mit anderen Worten, was machen Sie mit {nextPathname: nextState.location.pathname}?

Hier ist, was ich tun, in ./containers/LoginContainer.js:

import { push } from 'react-router-redux'; 
const mapStateToProps = (state) => ({ 
    nextPathname: state.routing.locationBeforeTransitions.state.nextPathname, 
}); 
const mapDispatchToProps = (dispatch) => ({ 
    changeLocationOnSignIn: (nextPathname) => { 
    dispatch(push(nextPathname)); 
    }, 
}); 

und in ./components/Login.js

componentWillReceiveProps(nextProps) { 
    // user signed in or signed up, assuming redux. you may use this elsewhere. 
    if (nextProps.user.status === 'authenticated' && nextProps.user.user && 
    !nextProps.user.error) { 
     this.props.changeLocationOnSignIn(this.props.nextPathname); 
    } 

React-Router 2.4.0 (April 2016) eingeführt withRouter, die eine HOC schafft. Es wird jedoch React.createClass umbrochen, keine JS-Klasse. Ich konnte es nicht mit redux-form usw. arbeiten lassen. Außerdem denke ich, dass der obige Code leichter zu verstehen ist.

Answer 3

Wie @JohnSz erwähnt, hatte ich auch Probleme mit der Verwendung von withRouter. Stattdessen habe ich es wie hier angewiesen: https://github.com/reactjs/react-router/blob/master/upgrade-guides/v2.0.0.md#programmatic-navigation

const RouteComponent = React.createClass({ 
    contextTypes: { 
    router: React.PropTypes.object.isRequired 
    }, 
    someHandler() { 
    this.context.router.push(...) 
    } 
}) 

Grundsätzlich gilt:

1. definieren context
2. Verwenden this.context.router.push (...)

Prost.

Answer 4

Ich wollte diesen Thread aktualisieren, weil ich eine ganze Menge Zeit damit verbracht habe, mich um diese Sache zu kümmern. In React Router 2.0.x ist replaceState veraltet zugunsten von ersetzen. Sehen Sie hier für weitere Details: https://github.com/ReactTraining/react-router/blob/v2.0.0/upgrade-guides/v2.0.0.md#link-to-onenter-and-isactive-use-location-descriptors

Der richtige Weg, dies zu tun, so etwas wie dieses wäre:

function requireAuth(nextState, replace) { 
    if (!userExists()) { 
    replace({ 
     pathname: '/signin', 
     state: { nextPathname: nextState.location.pathname } 
    }) 
    } 
} 

export const renderRoutes =() => (
    <Router history={browserHistory}> 
     <Route path="protectedRoute" component={Protected} onEnter={requireAuth} /> 
     <Route path="signin" component={SignIn} /> 
    </Route> 
    </Router> 
); 

Dann wird in der SignIn-Komponente können Sie nach einer erfolgreichen Anmeldung umleiten in wie folgt aus:

signInFunction({params}, (err, res) => { 
    // Now in the sign in callback 
    if (err) 
    alert("Please try again") 
    else { 
    const location = this.props.location 
    if (location.state && location.state.nextPathname) { 
     browserHistory.push(location.state.nextPathname) 
    } else { 
     browserHistory.push('/') 
    } 
    } 
}) 

Answer 5

Reagieren Router v4.2

Ich verwende React-16.2 & React-Router-4,2

und ich Lösung dieses this.props.history.push("/");

Mein Arbeitscode:

.then(response => response.json()) 
     .then(data => { 
      if(data.status == 200){ 
       this.props.history.push("/"); 
       console.log('Successfully Login'); 
      } 
     }) 

I wurde nach Dieses Dokument redirect-on-login-and-logout