动态生成路由 - React

Question

我正在尝试使用 react js 进行 RBAC（基于角色的访问控制）。我在 Stackoverflow 上看到了一些相关的问题，但它们与我的问题无关。我的问题是： 有一个用户，用户有一个角色，每个角色都有自己的分配给它的菜单列表。每个菜单都有一个路径和组件名称。 我需要做的是，当用户登录时，Route 会根据他的角色动态生成。

我们知道以下是在 React 中定义路由的常规方式。它是静态的。

<Switch>
     <Route path="/users" component={Users} exact />
     <Route path="/items" component={Items} exact />
     ....
</Switch>

我需要动态生成每条路线。这是我尝试过的，

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>

但这对我不起作用。当我尝试导航到/users 时，它找不到路线。但是当我使用第一种方法时，它可以正常工作。你能告诉我我的代码有什么问题吗？

这是描述我的问题的示例代码

Here is a sandbox link

Answer 1

您将组件作为字符串传递给Route，您需要在菜单数组中删除它们周围的引号。

menus=[
  {
    name:"Users"
    url:"/users"
    component:Users
  },
  {
    name:"Items"
    url:"/items"
    component:Items
  }
]

如果您的菜单是来自 DB 的动态菜单并且它们是字符串，那么您需要确保将组件导入到文件中，然后将其映射到如下对象：

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