使用用戶角色重用應用程序

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

一種選擇是為/ path創建單個組件，並在該組件內根據用戶角色返回不同的組件。

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