Type 'LoadableComponent<unknown>' is not assignable to type 'ReactNode'

Question

I'm trying for migration react-router-dom v5 to v6.

// react-router-dom v5
<Route exact path="/" component={router.Home} />

// react-router-dom v6
<Route path="/*" element={router.Home} /> // error

and got this error

Type 'LoadableComponent<unknown>' is not assignable to type 'ReactNode'. Type 'ComponentClass<ExtraComponentProps, any> & LoadableComponentMethods<unknown>' is not assignable to type 'ReactNode'.

How can i fix it ?

here is my code sample

routes.ts

import loadable from '@loadable/component';

export const Home = loadable(() => import('./pages/Home'));

App.tsx

import * as router from 'src/routes';

<Route path="/*" element={router.Home} /> // error

package.json

//devDependency
"@types/react": "^18.0.26",
"@types/react-dom": "^18.0.10",
"@types/react-router-dom": "^5.3.3",
"@types/loadable__component": "^5.13.4",

//dependency
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.6.2",
"@loadable/component": "^5.15.2",

Answer 1

Instead of

<Route path="/*" element={router.Home} /> // error

Use

const {Home} = router;
...
<Route path="/*" element={<Home />} />