如何用map函数简化React Route配置？

现有代码 #

import Home from "./components/underpages/Home";
import Kontakt from "./components/underpages/Kontakt";
import FAQ from "./components/underpages/FAQ";

// [...]

<Routes>
        <Route path="/"           element={<Home      />} />
        <Route path="/Kontakt"    element={<Kontakt   />} />
        <Route path="/FAQ"        element={<FAQ       />} />
      </Routes>

尝试的无效写法 #

{siteList.map((sites) => (
              import {site.Name} from "./components/underpages" + {site.path};
            ))}

// [...]

 {siteList.map((sites) => (
              <Route
              path=   {site.path}
              element={<{site.emelent}  />}
              />
            ))}

可行实现方式 #

方法1：静态导入+配置数组映射 #

适合组件数量不多的场景，逻辑简单直接：

// 提前导入所有路由组件
import Home from "./components/underpages/Home";
import Kontakt from "./components/underpages/Kontakt";
import FAQ from "./components/underpages/FAQ";

// 定义路由配置数组，每个项包含路径和对应组件实例
const siteList = [
  { path: "/", element: <Home /> },
  { path: "/Kontakt", element: <Kontakt /> },
  { path: "/FAQ", element: <FAQ /> },
];

// 在Routes中通过map渲染所有路由
<Routes>
  {siteList.map((site, index) => (
    <Route 
      key={index} // 必须添加唯一key，避免React渲染警告
      path={site.path} 
      element={site.element} 
    />
  ))}
</Routes>

方法2：动态导入+React.lazy（优化加载性能） #

如果组件数量较多，想要实现按需加载（减少初始打包体积），可以用React.lazy结合Suspense：

import { lazy, Suspense } from 'react';
import { Routes, Route } from 'react-router-dom';

// 路由配置数组，用lazy动态导入组件
const siteList = [
  { path: "/", component: lazy(() => import("./components/underpages/Home")) },
  { path: "/Kontakt", component: lazy(() => import("./components/underpages/Kontakt")) },
  { path: "/FAQ", component: lazy(() => import("./components/underpages/FAQ")) },
];

// 用Suspense包裹路由，组件加载时显示占位内容
<Suspense fallback={<div>加载中...</div>}>
  <Routes>
    {siteList.map((site, index) => (
      <Route 
        key={index}
        path={site.path} 
        element={<site.component />} 
      />
    ))}
  </Routes>
</Suspense>

无效写法的问题点 #

1. 静态导入限制：ES模块的import是静态语法，必须在文件顶部声明，不能在map这类运行时逻辑中动态执行。
2. JSX动态组件错误：JSX不支持<{site.element} />这种字符串转组件的写法，必须直接传入组件实例或组件本身。

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