React Router如何从数组映射生成路由并解决TS类型报错

React Router v6 中Route组件的element属性接收的类型是ReactNode，需要传入已经实例化的JSX元素。你当前代码直接传入的Component是未执行的组件函数引用，类型为() => JSX.Element，既不符合类型要求，运行时也无法被React正常渲染。

基础修复：映射时将组件渲染为JSX元素 #

保持原有路由配置结构不变，只需要在element属性位置将组件以JSX标签形式调用即可，这也是官方推荐的标准写法：

<BrowserRouter>
  <Routes>
    {publicRoutes.map(({path, Component}) => (
        // 注意这里写成<Component />，而非直接传Component
        <Route key={path} path={path} element={<Component />}/>
    ))}
  </Routes>
</BrowserRouter>

修改后TS类型会自动匹配，不需要额外添加类型断言，运行时也能正常渲染对应页面组件。

大型项目优化：补充路由配置类型约束 #

如果项目路由规模较大，可以提前给路由配置数组定义明确类型，在配置阶段就拦截类型错误，避免运行时异常：

import type { ComponentType } from 'react';
import type { RouteProps } from 'react-router-dom';

// 定义统一路由配置类型
interface AppRouteConfig {
  path: RouteProps['path'];
  Component: ComponentType;
}

// 给公共路由数组添加类型标注
export const publicRoutes: AppRouteConfig[] = [
    {
        path: MAIN_ROUTE,
        Component: Main
    },
    {
        path: ABOUT_ROUTE,
        Component: About
    }
]

添加类型后，后续如果配置路由时写错属性、传入非法组件值，TS会直接在配置行抛出错误，不需要等到渲染路由时才发现问题。

避坑提醒：不要用类型强转（比如element={Component as ReactNode}）绕过TS校验，这种写法只会消除类型报错，运行时React无法解析函数类型的element值，会直接渲染空白页面。

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