React Router动态路由配置问题：如何根据页面列表关联组件？

你的核心问题是把组件名称的字符串当成了组件对象传递给Route，React的Route组件的component属性需要接收实际的组件引用（也就是你import进来的Home、BannerManagement这些对象），而不是字符串"Home"。下面给你两种直接可行的解决方法：

方法一：直接在页面列表中存储组件对象 #

修改你的pageList，把element字段的值换成导入的组件本身，而不是字符串：

import Home from "../pages/Home";
import BannerManagement from "../pages/BannerManagement";

const pageList= [
  {
    path: "home",
    element: Home, // 直接使用组件对象
  },
  {
    path: "BannerManagement",
    element: BannerManagement,
  }
];

然后调整渲染代码（注意移除多余的Router嵌套，给循环的Route加key避免React警告）：

ReactDOM.render(
  <BrowserRouter>
    {pageList.map(page => (
      <Route 
        key={page.path} 
        exact 
        path={`/${page.path}`} 
        component={page.element} 
      />
    ))}
  </BrowserRouter>,
  document.getElementById('root')
);

方法二：通过组件映射表转换字符串到组件 #

如果因为某些场景必须用字符串存储组件名称，可以先创建一个组件映射对象，把字符串和对应的组件关联起来：

import Home from "../pages/Home";
import BannerManagement from "../pages/BannerManagement";

// 创建组件映射表
const componentMap = {
  Home: Home,
  BannerManagement: BannerManagement
};

const pageList= [
  {
    path: "home",
    element: "Home",
  },
  {
    path: "BannerManagement",
    element: "BannerManagement",
  }
];

渲染时通过映射表获取对应的组件：

ReactDOM.render(
  <BrowserRouter>
    {pageList.map(page => (
      <Route 
        key={page.path} 
        exact 
        path={`/${page.path}`} 
        component={componentMap[page.element]} 
      />
    ))}
  </BrowserRouter>,
  document.getElementById('root')
);

额外提醒（React Router v6 适配） #

如果你的项目用的是React Router v6，Route的写法有变化，需要用element属性传递组件的JSX实例，而不是component：

// 方法一对应v6的写法
<Route path={`/${page.path}`} element={<page.element />} />

// 方法二对应v6的写法
<Route path={`/${page.path}`} element={<componentMap[page.element] />} />

内容的提问来源于stack exchange，提问作者Kamohobe