React基于外部配置数组结合map方法实现路由组件动态渲染

代码无法正常运行有3个直接原因：

• JSX语法不支持在标签位置传入动态拼接的字符串作为组件名：小写开头的标签会被识别为原生DOM节点，大写开头的标签必须是当前作用域内可直接访问的组件变量
• 代码中写的<route>首字母小写，React会把它当成普通DOM标签渲染，而非react-router-dom提供的Route路由组件
• routes是定义在组件外部的全局常量，不能通过this.routes访问

核心思路是提前建立组件名字符串和实际组件引用的映射表，遍历路由配置时从映射表取出对应组件渲染即可，实现步骤如下：

1. 导入所有路由对应的页面组件
2. 编写组件映射对象，key和配置里的componentName字段一一对应
3. 遍历路由配置时，从映射表取到对应组件传给Route的element属性，注意Route标签首字母必须大写

完整可运行代码：

import React from 'react'
import {BrowserRouter as Router, Routes, Route} from 'react-router-dom'
// 导入所有页面组件，路径替换为项目实际路径
import Home from './pages/Home'
import About from './pages/About'
import Contact from './pages/Contact'

// 组件名与组件引用的映射表
const componentMap = {
  Home,
  About,
  Contact
}

const routes = [
  {
    name: 'home',
    path: '/',
    componentName: 'Home'
  },
  {
    name: 'about',
    path: '/about',
    componentName: 'About'
  },
  {
    name: 'contact',
    path: '/contact',
    componentName: 'Contact'
  }
]

class App extends React.Component {
  render() {
    const routeList = routes.map((route, i) => {
      // 从映射表取出当前路由对应的组件
      const PageComponent = componentMap[route.componentName]
      // Route首字母必须大写，直接传入取到的组件实例
      return <Route key={i} path={route.path} element={<PageComponent />} />
    })

    return (
      <Router>
        <div className='App'> 
          <Routes>{routeList}</Routes>
        </div>
      </Router>
    )
  } 
}

export default App

必须显式维护组件映射表的原因是：前端构建工具（Webpack/Vite等）做静态打包分析时，无法识别动态字符串对应的组件依赖，不会把对应组件代码打入产物包，只有显式导入、明确引用的组件才会被正常打包。
如果是路由数量很多的中大型项目，可以用构建工具提供的动态导入能力（Vite的import.meta.glob、Webpack的require.context）自动扫描页面目录生成映射表，省去手动维护的成本。

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