Question

我大约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

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

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

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

2 个答案: