認証状態の小道具は、ページが、私は私の簡単な反応のプロジェクトでReduxのを使用していると私は、ユーザーがログインしていない場合には、リダイレクトを発射することになっている保護された経路を設定しています

Question

をレンダリングする前に設定されていません。

マイ初期状態次のようになります。

const INITIAL_STATE = { 
    email: '', 
    password: '', 
    error: '', 
    loading: false, 
    loggedIn: false 
}; 

レンダリング機能、私のコンポーネントでは、次のようになります。

if (!loggedIn) { 
    return (<Spinner />); 
} 

if (loggedIn === false) { 

    return (
    <Redirect to={{ 
     pathname: '/login', 
     state: { from: this.props.location } 
    }} /> 
) 
} 
return (
    <Route {...this.props} /> 
) 

ユーザーがログインするとすべて正常に動作し、コンテンツが読み込まれるまでスピナーが表示されます。

ユーザーがログインしていないときにスピナーが表示され、何も起こらず、リダイレクトが基本的に呼び出されないときに問題が発生します。コンソールでは、コンポーネントを実行したときにのみ状態が設定され、後で機能が呼び出されないため、後で更新されることはありません。私はcomponentWillMount（）の部分で何か追加の関数を設定すべきか、それとも何かのようなものかどうか疑問に思っていますか？それとも、私は定義されていないと間違ってちょうど回っているのですか？

Answer 1

!loggedInと同じものをチェックする2つのステートメントがあります。returnのためにspinnerという結果になる最初のステートメントになります。

loadingが正常に動作と仮定すると、あなたはこれを試すことができます -

if (!loggedIn) { 
    return (
    <Redirect to={{ 
     pathname: '/login', 
     state: { from: this.props.location } 
    }} /> 
) 
} 

if (loading) { 
    return (<Spinner />); 
} 

return (
    <Route {...this.props} /> 
)