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

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

1 个答案: