React Router Dom(TS)数组传组件到路由报错：JSX元素无构造签名

问题根源 #

你遇到的报错本质是路由配置的类型定义和react-router-dom的要求不匹配：

• 自定义的IRoute接口把element的类型设为FC（函数组件类型），但react-router-dom的Route组件的element属性需要的是已渲染的JSX节点（React.ReactNode），而非组件本身。
• 即便你想直接传递组件而非渲染好的节点，FC类型也不足以覆盖所有组件类型（比如类组件），TS会因为类型校验严格报错。

方案一：按react-router-dom官方规范配置（推荐） #

直接在路由数组中传入渲染好的JSX节点，完全贴合官方API要求：

1. 修改IRoute接口类型：

import React from 'react';

export interface IRoute {
  path: string;
  element?: React.ReactNode; // 改为ReactNode类型
}

2. 更新路由数组，传入渲染好的组件：

import CardList from "../components/pages/CardList";
import { IRoute } from "../models/IRoute";

export const routes: IRoute[] = [
  { path: '/cards', element: <CardList /> }, // 直接传JSX
];

3. 简化App.tsx中的渲染逻辑：

import { BrowserRouter, Route, Routes, Navigate } from 'react-router-dom';
import { routes } from './Routes/routes';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        {routes.map(({ path, element }) => (
          <Route key={path} path={path} element={element} />
        ))}
        <Route path="*" element={<Navigate replace to="/cards" />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

方案二：传递组件本身（适合需要动态传props的场景） #

如果需要在渲染时给组件传递动态props，可以把element类型设为React.ComponentType（覆盖函数组件和类组件）：

1. 修改IRoute接口：

import React from 'react';

export interface IRoute {
  path: string;
  element?: React.ComponentType; // 用ComponentType代替FC
}

2. 路由数组保持原样，传递组件本身：

import CardList from "../components/pages/CardList";
import { IRoute } from "../models/IRoute";

export const routes: IRoute[] = [
  { path: '/cards', element: CardList },
];

3. App.tsx中的渲染逻辑不变，但TS会通过类型校验：

import { BrowserRouter, Route, Routes, Navigate } from 'react-router-dom';
import { routes } from './Routes/routes';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        {routes.map(({ path, element: Element }) => (
          <Route key={path} path={path} element={<Element />} />
        ))}
        <Route path="*" element={<Navigate replace to="/cards" />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

关于RouteObject报错的说明 #

react-router-dom提供的RouteObject类型中，element字段同样要求是React.ReactNode，如果你之前把RouteObject的element设为FC，也会触发相同的类型报错，按照方案一调整即可解决。

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