は最大コールスタックのサイズは、私は彼がログインしていない場合は、「TrapPage」にユーザーをリダイレクトしようとしている

Question

を超え反応

ここに私のコードです：。

私が関数requireAuthを入れ

function requireAuth(nextState, replace) { 
    if (!auth.loggedIn()) { 
     replace({ 
      pathname:'/trap' 
     }) 
    } 
} 

export default (
    <Route path="/" component={App} onEnter={requireAuth}> 
     <IndexRoute component={DashboardPage} /> 
     <Route path="trap"> 
      <IndexRoute component={TrapPage}/> 
     </Route> 
     <Route path="accounts"> 
      <IndexRoute component={AccountPage}/> 
      <Route path="add" component={AccountAdd} /> 
      <Route path="detail/:id" component={AccountDetail} /> 
     </Route> 
     <Route path="contacts"> 
      <Route path="detail/:id" component={ContactPage}/> 
     </Route> 
     <Route path="transmissors"> 
      <Route path="detail/:id" component={TransmissorPage}/> 
     </Route> 
     <Route path="attends" component={AttendancePage} /> 
     <Route path="reports" component={ReportPage} /> 
     <Route path="configs" component={ConfigurationPage} /> 
    </Route> 
); 

フォーカス取得時、コンソールは私にエラーを与える：

Uncaught RangeError: Maximum call stack size exceeded 

私が反応でbegginer思い、我慢してください:)

私のコードで何が間違っていますか？

Answer 1

ユーザーがログインしていない場合、ユーザーをリダイレクトすると同じルートで認証する必要があります。ログインしていないため、ユーザーをリダイレクトする無限ループにつながります。おそらく<Route path="trap">を下から移動します認証が必要なルート

また、関数に3番目のパラメータがありません。

function requireAuth(nextState, replace) 

は

function requireAuth(nextState, replace, cb) { 

であるべきで、あなたが認証ロジックで行われた後、次のようなcbを呼び出す必要があります：

function requireAuth(nextState, replace) { 
    if (!auth.loggedIn()) { 
     replace({ 
      pathname:'/trap' 
     }); 
    } 

    cb(); 
} 

それは流れをできるようになるコールバック関数ですルーティングの継続が継続されます。

はEDIT：

は

あなたのようなあなたのルートを再編成することができます：あなたはあなたのダッシュボードかに認証を必要と天気をに応じて、その後、

<Route path="/" component={App}> 
    <IndexRoute component={DashboardPage} /> 
    <Route path="trap"> 
     <IndexRoute component={TrapPage}/> 
    </Route> 
    <Route onEnter={requireAuth}> 
     <Route path="accounts"> 
      <IndexRoute component={AccountPage}/> 
      <Route path="add" component={AccountAdd} /> 
      <Route path="detail/:id" component={AccountDetail} /> 
     </Route> 
     <Route path="contacts"> 
      <Route path="detail/:id" component={ContactPage}/> 
     </Route> 
     <Route path="transmissors"> 
      <Route path="detail/:id" component={TransmissorPage}/> 
     </Route> 
     <Route path="attends" component={AttendancePage} /> 
     <Route path="reports" component={ReportPage} /> 
     <Route path="configs" component={ConfigurationPage} /> 
    </Route> 
</Route> 

とを、あなたは潜在的にそのルートにonEnter={requireAuth}を追加することができます同じように。これにより、認証を必要とするルートとそうでないルートが分離されます。