多个 React 路由器 - 相同的路径

Question

我是 React 的新手并尝试执行以下操作：在我的系统中，用户具有不同的角色（常规、经理、管理员）。对于每个角色，我使用不同的 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

您的路由器不能对两个不同的组件具有相同的路由，它将始终呈现第一个。

相反，您可以做的是制作一个包装组件，该组件将决定要呈现的内容。

例如：

<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>
    )
  }
  ...
}