React应用程序和用户角色

Question

大约两个月前我开始使用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 

我想要根据帐户的类型进行访问。

Answer 1

一种选择是创建为/路径的单一成分，并在该组件根据用户角色返回不同的组件。

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

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

Answer 2

我建议你用rootPageComponent环绕开关。

这个怎么样？

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

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

---

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