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

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

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

动态生成路由 - React

1 个答案: