React Router中如何将数组元素用作路由element配置项

问题核心 #

常规单条路由写法示例：

<Route path="/" element={<Homepage />} />

基于存储页面名称的数组动态生成路由时，通过字符串拼接尖括号生成JSX的方案无法生效，错误尝试代码如下：

const page = ["Homepage", "About"];

const edit = () => {
for (let i=0; i<10; i++) {
    page[i]="<"+page[i]+" />"
}

失效原因 #

JSX是编译阶段处理的语法糖，<Homepage />会在构建时被转换为React.createElement(Homepage)的调用，运行时拼接出的带尖括号内容只是普通字符串，不会被React识别为合法的组件元素。

正确实现 #

方案1：组件映射表（适配已有字符串名称数组的场景） #

先导入所有页面组件，建立组件名称和组件引用的映射关系，遍历数组时从映射表取对应组件渲染即可：

// 导入所有用到的页面组件
import Homepage from './pages/Homepage';
import About from './pages/About';
import { Route } from 'react-router-dom';

// 建立组件名与组件引用的映射
const componentMap = {
  Homepage,
  About
};

const pageNames = ["Homepage", "About"];

// 遍历生成路由配置
const routes = pageNames.map((name, idx) => {
  // 可按自身需求配置路由路径，示例规则：首页为/，其余路径为/加小写组件名
  const path = idx === 0 ? '/' : `/${name.toLowerCase()}`;
  const PageComponent = componentMap[name];
  // 注意：自定义组件变量名必须大写开头，JSX才会识别为组件而非原生HTML标签
  return <Route key={name} path={path} element={<PageComponent />} />;
});

方案2：数组直接存储组件引用（无字符串依赖场景推荐） #

如果不需要用字符串标识组件，直接在数组中存储组件引用和对应路径，逻辑更简洁：

import Homepage from './pages/Homepage';
import About from './pages/About';
import { Route } from 'react-router-dom';

const pageConfig = [
  { path: '/', component: Homepage },
  { path: '/about', component: About }
];

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

注意事项 #

不要使用eval执行拼接的JSX字符串，这类方案存在XSS安全风险，且生产环境构建压缩后组件变量名会被改写，字符串匹配逻辑会直接失效，上述两种方案都是生产环境可用的标准写法。

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