React+TypeScript报错TS2322：FC<{}>无法赋值给ReactNode求解决

你猜的没错，问题就出在没调用组件表达式。Route组件的element属性要求传入已渲染的React节点（ReactNode），但你当前直接传递了组件本身（React.FC类型），这就造成了类型不匹配，触发了TS2322错误。

修改方案 #

把element={makeLogin}改为element={<makeLogin />}，这样就将组件转换成了符合要求的React节点：

import React from 'react'
import { BrowserRouter, Routes, Route } from 'react-router-dom'

type Props = {
  makeLogin: React.FC
}

const Router: React.FC<Props> = ({ makeLogin }: Props) => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path='login' element={<makeLogin />} />
      </Routes>
    </BrowserRouter>
  )
}

export default Router

如果makeLogin组件需要接收props，直接在标签中传递即可，比如：

<makeLogin username="test" />

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