react-routerで画面遷移する際、権限について

Question

わからないこと

react-routerで画面遷移をする場合に、同じPATHで、ユーザーの状態に応じて表示させるコンポーネントを変化させたいです。
下のようにpathは同じhomeなのですが、例えばユーザーの状態がAならばAAAを表示させ、 状態がBならBBBを表示させるようにしたいです。

<Switch>
　　<Route exact path={"/home"} component={AAA} />
   <Route exact path={"/home"} component={BBB} />
</Swith>

こういうのを実装するにはやはりReduxなどを導入する必要があるのでしょうか？
どなたか教えていただけると幸いです。よろしくおねがいします。

Answer 1

例えばユーザーの状態がAならばAAAを表示させ、 状態がBならBBBを表示させるようにしたいです。

なら、「ユーザーの状態がAならばAAAを表示させ、 状態がBならBBBを表示させる」コンポーネントを作って、それをreact-routerに指定すればいいかと思います。

function BranchingComponent(){
  if(条件) return <AAA />;
  else return <BBB />;
}

<Switch>
　<Route exact path={"/home"} component={BranchingComponent} />
</Swith>

Comments

[hello_whats_up]

灯台下暗しでした。
できました、ありがとうございます。