使用用户角色重用应用程序

Question

我大约2个月前开始使用React/Redux,我想创建一个具有用户角色的应用程序.当用户登录时,我想更改我的Route组件:

<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 />;
  }
}