Search code examples
javascriptreactjstypescripttypeerror

Type '() => JSX.Element' is not assignable to type 'ReactNode'

I'm trying to render a component from an object, but the code is failing with an error:

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

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

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

  • Since version 6, React Router Dom no longer takes components, but elements instead. [react-router-dom] So instead of passing component you need to pass <Component/> like this:

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