title: React Router v5.1.2 Public & Protected Authenticated & Role Based routes
body: <p>Goal is to have /login as the only public route, once logged in user has routes based on user role.
  Authentication is done with Keycloak I get users from keycloak.idTokenParsed.preferred_username: admin, manager, engineer, operator.
  If operator tries to go to role restricted route gets redirected to /notauthorized page. (This part not done)
  If not logged in user gets redirected to /login page. (This part is done/works)</p>
  
  <p>Is there a better way to do this? Not repeating routes &amp; adding additional users in Routes.jsx kind of a mess.
  How do I implement role restricted redirect to /notauthorized?</p>
  
  <p>App.js (does not have all the imports and missing bottom part with mapStateToProps, mapDispatchToProps &amp; export default App )</p>
  
  <pre><code>import React, { useEffect } from "react";
  import { Route, Redirect, Switch } from "react-router-dom"
  
  let routeWithRole = [];
  let user = '';
  
  const AppContainer = ({ keycloak }) =&gt; {
    if(keycloak &amp;&amp; keycloak.token) {
      user = keycloak.idTokenParsed.preferred_username
      if( user === 'admin') {
        routeWithRole = admin;
      } else if( user === 'engineer') {
        routeWithRole = engineer
      } else if(user === 'manager') {
        routeWithRole = manager
      } else {
        routeWithRole = operator
      }
    }
  
     return (
      &lt;div&gt;
            {(keycloak &amp;&amp; keycloak.token) ?
              &lt;React.Fragment&gt;
                  &lt;Switch&gt;
  
                    {routeWithRole.map((prop, key) =&gt; {
                      console.log('App.js Prop &amp; Key ', prop, key)
                      return (
                        &lt;Route
                          path={prop.path}
                          key={key}
                          exact={true}
                          component={prop.component}
                        /&gt;
                      );
                    })}
                    &lt;Redirect from={'/'} to={'/dashboard'} key={'Dashboard'} /&gt;
                  &lt;/Switch&gt;
              &lt;/React.Fragment&gt;
              :
              &lt;React.Fragment&gt;
                &lt;Switch&gt;
                  {publicRoutes.map((prop, key) =&gt; {
                    return (
                      &lt;Route
                        path={prop.path}
                        key={key}
                        exact={true}
                        component={(props) =&gt;
                          &lt;prop.component
                            keycloak={keycloak}
                            key={key} {...props} /&gt;
                        }
                      /&gt;
                    );
                  })}
                  &lt;Redirect from={'/'} to={'/login'} key={'login'} /&gt;
                &lt;/Switch&gt;
              &lt;/React.Fragment&gt;
            }
        &lt;/div&gt;
    )
  }
  </code></pre>
  
  <p>Routes.jsx (missing all the impotrs)</p>
  
  <pre><code>export const publicRoutes = [
    { path: "/login", type: "public", name: "landing page", component: LandingPageContainer },
  ]
  
  export const admin = [
    { path: "/createUser", name: "Create User", component: CreateUser},
    { path: "/editUser", name: "Edit User", component: EditUser},
    { path: "/createdashboard", name: "Create Dashboard", component: CreateDashboard },
    { path: "/editashboard", name: "Edit Dashboard", component: EditDashboard },
    { path: "/createcalendar", name: "Create Calendar", component: CreateCalendar },
    { path: "/editcalendar", name: "list of factories", component: EditCalendar },
    { path: "/dashboard", name: "Dashboard", component: Dashboard }
  ]
  
  export const engineer = [
    { path: "/createdashboard", name: "Create Dashboard", component: CreateDashboard },
    { path: "/editashboard", name: "Edit Dashboard", component: EditDashboard },
    { path: "/dashboard", name: "Dashboard", component: Dashboard },
    { path: "/notauthorized", name: "Not Authorized", component: Notauthorized }
  ]
  
  export const manager = [
    { path: "/createcalendar", name: "Create Calendar", component: CreateCalendar },
    { path: "/editcalendar", name: "Edit Calendar", component: EditCalendar },
    { path: "/dashboard", name: "Dashboard", component: Dashboard },
    { path: "/notauthorized", name: "Not Authorized", component: Notauthorized }
  ]
  
  export const operator = [
    { path: "/dashboard", name: "Dashboard", component: Dashboard },
    { path: "/notauthorized", name: "Not Authorized", component: Notauthorized }
  ]
  </code></pre>