類型 '() => JSX.Element' 不可分配給類型 'ReactNode'

Question

嘗試從 object 調用組件以類型錯誤結束：類型“() => JSX.Element”不可分配給類型“ReactNode”

const Login = () => <>login</>

const publicRoutes = [
  {
    path: '/login',
    component: Login
  }
]

function AppRouter() {
  return <Routes>
      {publicRoutes.map(({path, component}) => (
        <Route path={path} element={component} /> // warning
      ))}
    </Routes>
  )
}

Answer 1

從版本 6 開始，react 路由不再獲取組件，而是獲取元素。 因此，您需要像這樣傳遞<Component/>而不是傳遞組件：

{publicRoutes.map(({path, component: Component}) => (
  <Route path={path} element={<Component/>} /> // warning
))}