bugfix> javascript > 投稿

私の反応コンポーネントは次のようになります:

class App extends React.Component {  
  render() {
    debugger;
    if(!this.props.isUserExist) {
      return (
        <div>
          <Route exact path="/" component={DashboardPage} />
        </div>
      );
    }
    return (
      <div>
        <Switch>
          <Route exact path="/" component={HomePage} />
          <Route exact path="/list" component={ListPage} />
          <Route component={NotFoundPage} />
        </Switch>
      </div>
    );
  }
}

私の質問は、react router v4でこれらの状態を確認するより良い方法はありますか?これがこれらの状態をチェックする最良の方法ですか?これがベストプラクティスですか? 誰かがこれで私を助けてください!

回答 2 件
  • 個々のパスのより簡単な方法で、あなたは行くことができます、

    <Route exact path="/" component={()=>this.props.isUserExist?<HomePage/> : <Dashboard/>} />
    
    

  • 要するに、React Routerはこのシナリオ用のカスタムソリューションで構築されていません。開発者がより良いオプションを決定できるようにするのに十分なほど軽量です。

    長い話、それは依存します。コードに共通のルートが必要であると予想される場合(この例ではありません)、インラインJavascriptおよび演算子( && )。例えば:

    class App extends React.Component {  
      render() {
        return (
          <div>
            <Switch>
              {this.props.isUserExist && 
              <Route exact path="/" component={HomePage} />
              <Route exact path="/list" component={ListPage} />
              }
              <Route exact path="/dashboard" component={DashboardPage} />
              <Route component={NotFoundPage} />
            </Switch>
          </div>
        );
      }
    }
    
    

    この例の範囲では、(ログアウトしたユーザーのみがアクセス可能なダッシュボード、ログインしたユーザーのみがアクセス可能なページが見つかりません)あなたの例は概念を示しています早期返還、これは良いパターンです。 else を書くのを避ける方法です  また、メインコードパスが何であるか(ユーザー認証)および臨時コードパスが何であるか(ユーザーは認証されません)を通知します。早期返還の詳細については、こちらをご覧ください。

    独自のカスタム PrivateRoute を構築するなど、これに関する他のアイデアもあります。 。このアイデアの例をここに示します。

あなたの答え