2017-09-04 15 views
2

をレンダリングしていないリアクト:は、ルータが、私は次のようにルータV4に反応使って、非常に基本的な認証ワークフローをやってログインページにリダイレクトしますが、ログインコンポーネント

const AuthenticatedRoute = ({ component: Component, ...rest }) => ( 
    <Route {...rest} render={props => (
    sessionStorage.getItem('jwt') ? (
     <Component {...props} /> 
    ) : (
     <Redirect to={{ 
     pathname: "/login", 
     state: { from: props.location } 
     }} /> 
    ) 
)}/> 
) 

ReactDOM.render(
    <Provider store={createStoreWithMiddleware(reducers)}> 
    <BrowserRouter> 
     <div> 
      <AuthenticatedRoute exact path="/" component={App} /> 
      <Route path="/login" component={LoginPage} /> 
     </div> 
    </BrowserRouter> 
    </Provider> 
    , document.querySelector('.container')); 

流れが完全に動作し、何の「JWTは」存在しないときアプリケーションは/ loginにリダイレクトされます。しかし、奇妙なことに、私はブラウザからリフレッシュを押すまでレンダリングされません(空白のページ)。

デバッグ方法や問題の可能性があるものが、オンラインで見つかったほとんどの例と同様の方法であるため、よく分かりません。

+1

'LoginPage'コンポーネントはマウントされていますか? (ブレークポイントを固定するか、 'componentDidMount()'メソッドにメッセージを記録する) –

+0

ルータはそれをマウントする責任を負いませんか? –

+0

react-reduxを使用していますか? – Tomasz

答えて

1

あなたはreact-reduxを使用していると思います。それはよくある問題です。 (そうでない場合は回答を削除します)

{pure: false}を反応還元剤connectで使用するか、withRouter HOCを使用してください。

React router 4 does not update view on link, but does on refresh

+1

はい、それは本当に問題です。ありがとう! –

+0

しかし、どのオプションが正確に役立ったのかわかりますか? –

関連する問題