javascript - 具有用户 Angular 色的 React 应用程序

Question

我大约 2 个月前开始使用 React/Redux，我想制作一个具有用户 Angular 色的应用程序。当用户登录时，我想更改我的 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

一个选项是为 / 路径创建单个组件，并在该组件内根据用户 Angular 色返回不同的组件。

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

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