Javascript 使用用户角色响应应用程序

大约2个月前，我开始使用React/Redux，我想制作一个具有用户角色的应用程序。当用户登录时，我想更改我的路由组件：

<Route path={"/"} component={MainPage}></Route>

组成

<Route path={"/"} component={MainPageUser}></Route>

如果管理员

<Route path={"/"} component={MainPageAdmin}></Route>

但是如果我用我的路由器做了一个交换，我会得到错误

Warning: [react-router] You cannot change <Router routes>; it will be ignored

警告：[反应路由器]您无法更改；它将被忽略

---

我希望根据帐户类型进行访问。

我建议您使用rootPageComponent包装交换机

这个怎么样

（下面是一个简单的示例代码。请注意，它不能正常工作）

---

//RootPage.js
导出默认常量RootPage（{role}）=>{
交换机（角色）{
案例用户：返回
案例管理员：返回
默认值：返回
}
}

一个选项是为

/

路径创建单个组件，并在该组件中根据用户角色返回不同的组件

<Route path={"/"} component={Home} userRole={userRole}></Route>

class Home extends React.Component {
  render() {
    return this.props.userRole === "admin" ? <HomeAdmin /> : <HomeVisitor />;
  }
}

类Home扩展了React.Component{
render（）{
返回this.props.userRole==“admin”？：；
}
}

不适用于我，但Brett DeWoody代码正确工作您知道如何使ii更安全吗？我有一个巨大的问题与用户登录，我找不到解决这个问题的办法，这是一个很好的办法，以一个系统，可以有许多不同类型（超过10）的用户？

// RootPage.js
export default const RootPage({role}) => {
    switch(role) {
        case USER: return <MainPageUser />
        case ADMIN: return <AdminPage />
        default: return <MainPage />
    }
}

<Route path={"/"} component={Home} userRole={userRole}></Route>

class Home extends React.Component {
  render() {
    return this.props.userRole === "admin" ? <HomeAdmin /> : <HomeVisitor />;
  }
}