今

Question

反応している状態に基づいてユーザーをリダイレクトする、私のルータは、このようになります。オンボーディングフロー（ユーザ名の選択など）。しかし、私はこれらの条件付きリダイレクトの多くが将来必要になると思います。これらの条件付きリダイレクトを処理する最良の方法は何ですか？すべてのリダイレクトを処理する単一のコンポーネントを持つことは可能ですか？

Answer 1

あなたは、ユーザーがログインして、ちょうどことをインポートしているかどうかを確認する機能を持つことができる：

import {browserLocation} from './browser-location' 
export default function checkLoggedIn() { 
    if (localStorage.jwt === null) 
     browserLocation.pushState('/login') 
} 

Answer 2

<Route> sがルートマッチと呼ばれるonEnterフックを受け入れるを。フックは次のようになります。

function requireAuth(nextState, replace) { 
    if (!loggedIn()) { 
     replace({ pathname: 'login' }); 
    } 
} 

そして、そのようにそれを使用する：あなたは、複数のチェックを組み合わせることができます

<Route path="/" component={AppPage}> 
    <Route path="home" component={HomePage} onEnter={requireAuth}/> 
    <Route path="login" component={LoginPage}/> 
</Route> 

---

より構成可能例：

function checkAuth() { 
    if (!loggedIn()) { 
     return { pathname: 'login' }; 
    } 
} 

function checkOnboarding() { 
    if (!completedOnboarding()) { 
     return { pathname: 'onboarding' }; 
    } 
} 

function redirect(...checks) { 
    return function(nextState, replace) { 
     let result; 
     checks.some(check => { 
      result = check(); 
      return !!result; 
     }); 
     result && replace(result); 
    }; 
} 

その後、結合する！

<Route path="/" component={AppPage}> 
    <Route path="home" component={HomePage} 
     onEnter={redirect(checkAuth, checkOnboarding)}/> 
    <Route path="login" component={LoginPage}/> 
    <Route path="onboarding" component={OnboardingPage} 
     onEnter={redirect(checkAuth)}/> 
</Route>