I started working with React/Redux about 2 months ago and I want to make an application with user roles. When a user logs in I want to change my Route ponent:

<Route path={"/"} ponent={MainPage}></Route>

To ponent

<Route path={"/"} ponent={MainPageUser}></Route>

If admin

<Route path={"/"} ponent={MainPageAdmin}></Route>

But if I make a switch with my Router I get the error

Warning: [react-router] You cannot change <Router routes>; it will be ignored

I want make access based on the type of account.

I started working with React/Redux about 2 months ago and I want to make an application with user roles. When a user logs in I want to change my Route ponent:

<Route path={"/"} ponent={MainPage}></Route>

To ponent

<Route path={"/"} ponent={MainPageUser}></Route>

If admin

<Route path={"/"} ponent={MainPageAdmin}></Route>

But if I make a switch with my Router I get the error

Warning: [react-router] You cannot change <Router routes>; it will be ignored

I want make access based on the type of account.

• javascript
• reactjs
• routes
• redux
• react-router

2 Answers 2

One option is to create a single ponent for the / path, and within that ponent return a different ponent based on the user role.

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

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

I remend you rootPageComponent wrapping the switchs.

How about this?

(Below is a just simple sample code. Please note that it does not work correctly)

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

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