React.FC与ReactElement类型不匹配，React Router路由配置报错如何解决

核心问题说明 #

你遇到的报错由两个问题共同导致：

1. 类型定义不匹配：你在路由配置中给component字段声明的ReactElement是已实例化的JSX元素类型，但你实际存储的是React.FC类型的组件构造函数，二者属性完全不同，因此触发TS2739类型错误。
2. 路由用法不符合React Router v6规范：Route组件的element参数要求传入可直接渲染的React元素，不能直接传入组件构造函数，因此你设置any类型绕过TS校验后，运行时会抛出「函数不能作为React子元素」的警告。

具体修改步骤 #

第一步：修正路由配置的类型定义 #

将component字段的类型替换为ComponentType，该类型可以同时兼容函数组件和类组件：

import Login from "../components/Login/Login";
import Dashboard from "../components/Dashboard/Dashboard";
import PageNotFound from "../components/PageNotFound/PageNotFound";
import { ComponentType } from "react";

const routes: Array<{
    path: string,
    component: ComponentType,
    is_private: boolean
}> = [
    {
        path: '/',
        component: Login,
        is_private: false
    },
    {
        path: '/dashboard',
        component: Dashboard,
        is_private: true
    },
    {
        path: '/*',
        component: PageNotFound,
        is_private: false
    }
];

export default routes;

如果你的组件有固定入参，也可以给ComponentType传入泛型约束，比如ComponentType<{id: string}>。

第二步：修正App组件中路由的渲染逻辑 #

在给element传值时，将组件构造函数实例化为JSX元素即可：

const App: React.FC = () => {
  return (
    <div className="wrapper">
      <h1>My App</h1>
      <BrowserRouter>
        <Routes>
            {routes.map((route) => (
                <Route path={route.path}
                       key={route.path}
                       element={<route.component />} />
            ))}
        </Routes>
      </BrowserRouter>
    </div>
  );
}

如果需要给组件传参，直接在组件标签内添加属性即可，比如<route.component userId={1} />。

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