ReactRouter wird nicht richtig nach Flussbenachrichtigung umgeleitet

Question

Ich bin ein Neuling im Reagieren und Flux. Ich stolperte auf folgendes Problem bei der Verwendung von ReactRouter (2.4)

Ich benutze HashHistory und ich muss auf die "/" Seite umleiten, wenn ich in "/ Login" Seite nach einem erfolgreichen bin Anmeldeversuch.

Router

ReactDOM.render(
<Router history={hashHistory}> 
    <Route path="/" component={App}> 
     <IndexRoute component={ErasmusPage} onEnter={authCheck}></IndexRoute> 
     <Route path="login"component={withRouter(LoginPage)}></Route> 
    </Route> 
</Router>, app); 

Login Seite

constructor() { 
    super(); 
    this.notifyLogin = this.notifyLogin.bind(this); 
    this.state = { 
     email: "", 
     password: "" 
    }; 
} 

componentWillMount() { 
    authStore.on("login", this.notifyLogin); 
} 

componentWillUnmount() { 
    authStore.removeListener("login", this.notifyLogin); 
} 

notifyLogin() { 
    this.props.router.push('/'); 
} 

... 

handleSubmit(e) { 
    e.preventDefault(); 

    let data = { 
     email: this.state.email, 
     password: this.state.password 
    }; 
    AuthActions.authenticate(data); 
} 
... 

Die Strömung ist:

1. nach einem einreicht, authActions und Shop erarbeiten die Daten (Ajax-Aufruf beteiligt) .
2. Wenn der Anmeldeversuch in Ordnung ist, sendet AuthStore ein "Login" -Signal ...
3. ... so kann ich notifyLogin() ausführen.

Das Problem ist: this.props.router.push (‚/‘) umleiten nicht richtig, es ändert sich die URL aber nicht die Seite (es sieht aus wie der Zustand Refresh nicht ausgelöst wird erhalten).

Seltsame Sache ist, wenn ich this.props.router.push ('/') in der handleSubmit-Funktion die Umleitung funktioniert perfekt.

Irgendeine Idee von was ist los? Diese

Answer 1

hat gut funktioniert für mich so weit:

• Wickeln Sie Ihre Anwendung in einer Komponente, die Login/Auth Zustand enthält.
• auf machen, wenn nicht angemeldet, die Login-Seite Komponente machen, sonst machen die App Komponente

render() { 
 
    const { isAuthorized, authError} = this.props; 
 
    
 
    if (isAuthorized) { 
 
    return (<Layout />); 
 
    } 
 
    
 
    return (<Login authError={authError}/>); 
 
}