플럭스 알림 후 ReactRouter가 올바르게 리디렉션하지 않습니다.

Question

저는 반응과 플럭스의 초보자입니다. ReactRouter (2.4)를 사용할 때 다음과 같은 문제가 발생했습니다.

hashHistory를 사용하고 있는데 성공한 후에 "/ login"페이지에있을 때 "/"페이지로 리디렉션해야합니다. 로그인 시도.

라우터

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

로그인 페이지

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); 
} 
... 

흐름은 다음과 같습니다

1. 하나 (아약스 호출이 포함), 제출 authActions 및 저장이 datas 정교한 후 .
2. 로그인 시도가 괜찮 으면 AuthStore가 "로그인"신호를 내 보냅니다 ...
3. ... 그래서 notifyLogin()을 실행할 수 있습니다.

문제는 this.props.router.push ('/')가 제대로 리디렉션하지 않으면 URL이 변경되지만 페이지는 표시되지 않습니다 (상태 새로 고침이 트리거되지 않은 것으로 보입니다).

handleSubmit 함수에 this.props.router.push ('/')를 넣으면 이상한 일입니다. 리디렉션은 완벽하게 작동합니다.

무슨 일이 벌어지고 있는지 알고 싶습니다.

Answer 1

이 지금까지 나를 위해 잘 작동했습니다

• 가 로그인/인증 상태를 포함하는 구성 요소에서 응용 프로그램을 감 쌉니다. 응용 프로그램 구성 요소

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