Mutiple React Router - gleicher Pfad

Question

Ich bin neu zu Reagieren und versuchen, Folgendes zu tun: In meinem System Benutzer haben unterschiedliche Rollen (regulär, Manager, Admin). Für jede Rolle verwende ich ein anderes Router-Objekt. Sowohl in meinem AdminRouter als auch in meinem ManagerRouter möchte ich einen Pfad zum/Dashboard haben, aber jeder wird auf eine andere Komponente verweisen.

Ist es möglich, eine Logik hinzuzufügen, die (basierend auf der Benutzerrolle) entscheidet, einige Router zu ignorieren? Wenn der Benutzer beispielsweise Manager ist, überspringt der Router alle AdminRouter-Elemente.

Answer 1

Ihr Router kann nicht den gleichen Router für zwei verschiedene Komponenten haben, er wird immer den ersten rendern.

Was Sie stattdessen tun können, ist eine Wrapper-Komponente, die entscheiden wird, was gerendert werden soll.

Zum Beispiel:

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

und in DashboardWrapper

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