react-router-dom报FC<{}>|ReactNode无法赋值给ReactNode类型错误

react-router-dom v6 中Route组件的element属性接收的类型是ReactNode，也就是已经实例化的JSX元素，你现在直接把React.FC类型的组件本身传进去了——FC本质是组件构造函数，不属于可直接渲染的ReactNode范畴，所以会触发类型报错；就算你强行修改类型跳过TS校验，React也无法直接渲染函数本身，自然会出现页面空白的问题。

你当前的错误代码：

// landingPage是FC类型的组件定义，直接传入不符合类型要求
<Route path="landing-page" element={landingPage} />

你看到的报错提示Type 'FC<{}>' is not assignable to type 'ReactNode'，和上述根因完全匹配。

不要直接传组件本身，将组件写成JSX标签的形式、传入渲染后的元素即可：

// 正确写法：<LandingPage />是ReactNode类型，完全符合element的类型要求
<Route path="landing-page" element={<LandingPage />} />

• 不要通过给组件手动加React.ReactNode | React.FC类型断言的方式绕开TS报错：类型校验只是编译时提示，本质问题是传值格式不符合API要求，改类型解决不了运行时无法渲染的问题。
• 如果是懒加载路由、路由鉴权包裹的场景，同样要保证传入的是JSX元素，参考写法：

import { Suspense, lazy } from 'react'
import RequireAuth from './components/RequireAuth'
const LandingPage = lazy(() => import('./pages/LandingPage'))

<Route
  path="landing-page"
  element={
    <RequireAuth>
      <Suspense fallback={<div>页面加载中</div>}>
        <LandingPage />
      </Suspense>
    </RequireAuth>
  }
/>

• 如果你的项目里用的是react-router-dom v5版本，那API是用component属性接收组件本身，v6版本才改为element接收JSX元素，注意不要混写两个大版本的API。

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