複数のリアクションルータ - 同じパス

Question

私は反応して次のことをやってみることに新しいです： 私のシステムでは、ユーザには異なるロール（regular、manager、admin）が割り当てられています。 役割ごとに、私は別のRouterオブジェクトを使用します。 AdminRouterと私のManagerRouterの両方で、/ dashboardへのパスが必要ですが、それぞれ別のコンポーネントに誘導されます。

 <Router> 
     <div> 
      <Switch> 
       <AdminRouter path="/dashboard" component={AdminDashboardPage}/> 
       <ManagerRouter path="/dashboard" component={ManagerDashboardPage} /> 
       <Route component={NotFoundPage}/> 
      </Switch> 
     </div> 
    </Router> 

（ユーザーの役割に基づいて）一部のルータを無視するように決定するロジックを追加することはできますか？たとえば、ユーザがManagerの場合、ルータはすべてのAdminRouterエレメントをスキップします。

Answer 1

あなたのルータは2つの異なるコンポーネントに対して同じ経路を持つことはできません。常に最初のルータをレンダリングします。

代わりに何をレンダリングするかを決定するラッパーコンポーネントを作成することができます。例えば

：

<Router> 
    <div> 
    <Switch> 
    <Route exact path="/dashboard" component={DashboardWrapper}/> 
    <Route component={NotFoundPage}/> 
    </Switch> 
    </div> 
</Router> 

とDashboardWrapper

class DashboardWrapper extends Component { 
    ... 
    render(){ 
    const { adminUser } = this.props 
    return (
     <div> 
     { 
      adminUser 
      ? <AdminDashboard /> 
      : <ManagerDashboard /> 
     } 
     </div> 
    ) 
    } 
    ... 
}