如何在React中映射生成路由列表？优化组件名使用方式

你遇到的问题核心是：React无法直接将字符串当作自定义组件渲染，必须引用实际的组件对象。要实现类似li映射到ul的简洁写法，可通过组件映射表解决，具体步骤如下：

1. 定义组件映射关系 #

先将字符串名称与对应的组件对象绑定，创建一个映射表：

// 先导入所需组件
import RouteComponent1 from './RouteComponent1';
import RouteComponent2 from './RouteComponent2';
import RouteComponent3 from './RouteComponent3';

// 组件映射表：字符串 -> 组件对象
const componentMap = {
  routeComponent1: RouteComponent1,
  routeComponent2: RouteComponent2,
  routeComponent3: RouteComponent3
};

2. 用map生成路由列表 #

基于原有的字符串数组，通过映射表取出对应组件，再生成Route：

const navTitlesArray = [
  "routeComponent1",
  "routeComponent2",
  "routeComponent3"
];

const navRoutes = navTitlesArray.map(routeTitle => {
  // React要求自定义组件首字母大写，所以把取出的组件赋值给大写开头的变量
  const Component = componentMap[routeTitle];
  return (
    <Route
      key={routeTitle}
      path={`/${routeTitle}`}
      element={<Component />}
    />
  );
});

更易维护的进阶写法 #

如果要进一步提升可维护性，可以直接定义包含路径和组件的配置数组，省去字符串到组件的映射步骤：

const routeConfigs = [
  { path: '/routeComponent1', component: RouteComponent1 },
  { path: '/routeComponent2', component: RouteComponent2 },
  { path: '/routeComponent3', component: RouteComponent3 }
];

const navRoutes = routeConfigs.map(({ path, component: Component }) => (
  <Route
    key={path}
    path={path}
    element={<Component />}
  />
));

为什么原写法不生效？ #

React在解析JSX时，只有首字母大写的组件对象才会被识别为自定义组件；而你原代码中的<{routeTitle}/>里的routeTitle是字符串，会被当作普通HTML标签处理，自然无法渲染对应的组件。

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