Generate Route dynamically - React - reactjs

Question

I am trying to do RBAC(Role-Based Access Control) using react js. I have seen some related question on Stackoverflow but they are not related whith my question. My question is:
There is a user and the user has a role and every role has its own list of menus assigned to it. Each menu has a path and component name.
What I need to do is that when a user sign in Route will be generated dynamically based on his role.
As we know the following is the normal way of defining routes in React. and it is static.
<Switch>
<Route path="/users" component={Users} exact />
<Route path="/items" component={Items} exact />
....
</Switch>
I need to generate every Route dynamically. This is what I have tried,
menus=[
{
name:"Users"
url:"/users"
component:"Users"
},
{
name:"Items"
url:"/items"
component:"Items"
}
]
<Switch>
{
menus.map(menu =>{
return(<Route path={menu.url} component={menu.component} exact/>)
})
}
</Switch>
But this is not working for me. When I try to navigate to /users it can't find the route. But when I use the first method it works correctly. Can you please tell me whats wrong with my code??
Here is a sample code that describes my problem
Here is a sandbox link

Answer 1

You are passing the component as a string to Route, you need to remove the quotes around them in your menu array.
menus=[
{
name:"Users"
url:"/users"
component:Users
},
{
name:"Items"
url:"/items"
component:Items
}
]
If your menu is dynamic from a DB and they are strings, then you will need to make sure the component is imported into the file, and then map it with an object like so:
import {Users} from './Users';
// assuming this is what menu will return as
const menus=[
{
name:"Users"
url:"/users"
component:"Users"
},
{
name:"Items"
url:"/items"
component:"Items"
}
]
const keyMap = {
Users: Users // mapping 'Users' string to <Users/> component
}
return (<Route path={menu.url} component={keyMap[menu.component]} exact/>)
Solution demonstration is available here