2017-09-18 13 views
2

私のリアクションルータのonEnterプロップに関するヘルプを探しています。私はそれを指定していませんが、アプリケーション内のすべてのコンポーネント(イベント)に対してonEnter propがトリガーされているようです。 ルータの設定に関連することがありますか。すべてのコンポーネントのonEnterプロップトリガー

マイコード:

<Provider store={store}> 
<Router history={browserHistory}> 
    <Route path="/" component={App}> 
    <Route 
     path="/1" 
     components={{ main: Hierarchy, sidebar: NavBar }} 
     onEnter={AWSApi.tokenIsValid(authHeader)} 
    /> 
    <Route 
     path="/2" 
     components={{ main: Entities, sidebar: NavBar }} 
     onEnter={AWSApi.tokenIsValid(authHeader)} 
    /> 
    <Route 
     path="/2/:id" 
     component={Analysis} 
     onEnter={AWSApi.tokenIsValid(authHeader)} 
    /> 
    <Route path="/1/:id" component={Entity} onEnter={AWSApi.tokenIsValid(authHeader)} /> 
    </Route> 
    <Route path="/login" component={AuthForm} /> 
    <Route path="/new-password" component={ChangePasswordForm} /> 
</Router> 

答えて

2

編集:実は@bennygenelあなたはすべてのルートで起こっ認証を抱えている問題を見つけました。しかし、あなたのルーティングに関するもう1つの問題は次のとおりです。


ルートを定義した順序に問題があります。

たとえば、/loginにアクセスすると、ルートは<Route path="/" />を満たし、それを入力します。同様に、/1/ABCを訪問すると<Route path="/1" />を満たし、それを入力します。一般的には、より厳密な/より具体的なルートを最初に定義し、次により一般的なルートを定義する必要があります。

あなたは、このようにそれらを定義する必要があります。

<Router history={browserHistory}> 
    <Route path="/login" component={AuthForm} /> 
    <Route path="/new-password" component={ChangePasswordForm} /> 
    <Route path="/" component={App}> 
    <Route path="/1/:id" component={Entity} onEnter={() => AWSApi.tokenIsValid(authHeader)} /> 
    <Route 
     path="/1" 
     components={{ main: Hierarchy, sidebar: NavBar }} 
     onEnter={() => AWSApi.tokenIsValid(authHeader)} 
    /> 
    <Route 
     path="/2/:id" 
     component={Analysis} 
     onEnter={() => AWSApi.tokenIsValid(authHeader)} 
    /> 
    <Route 
     path="/2" 
     components={{ main: Entities, sidebar: NavBar }} 
     onEnter={() => AWSApi.tokenIsValid(authHeader)} 
    /> 
    </Route>  
</Router> 

あなたは公式ドキュメントからthe Precedence sectionをチェックアウトする必要があります:

最後に、ルーティングアルゴリズムは、それらが定義されているため にルートを一致させようとします、 上から下へ。したがって、兄弟ルートが2つある場合は、 は、の後ろの兄弟と一致する可能性のあるすべてのpathと一致していないことを確認する必要があります。例えば、はこの行いません。

<Route path="/comments" ... /> 
<Redirect from="/comments" ... /> 
1

を実際にあなたの問題は、あなたが小道具として送信ではなく、関数を実行していることです。

この

onEnter={AWSApi.tokenIsValid(authHeader)} 

でなければなりません

onEnter={() => AWSApi.tokenIsValid(authHeader)} 
関連する問題