How to pass route children to root App in SolidJS in typescript?

Question

I am trying to figure out to pass route elements to root element in typescript. I am currently using "@solidjs/router": "^0.13.6". Here is a demo of what I want to achieve. I want to do config based routing for my project.

export const routes: RouteDefinition[] = [
  {
    path: '/',
    component: Home,
  },
]

const App: Component = (children: JSX.Element) => {
  return (
    <>
      <Navbar />
      <main>
        {children}
      </main>
      <Footer />
    </>
  );
}


render(
  () => (
    <Router root={App}>
      {routes}
    </Router>
  ),
  root,
);

It is giving me type errors. I have no clue of what types to use, or if my structure is correct at all. App gives me this error:

Type '(children: JSX.Element) => JSX.Element' is not assignable to type 'Component'.
  Types of parameters 'children' and 'props' are incompatible.
    Type '{}' is not assignable to type 'Element'.

{children} gives me this error:

Property 'children' does not exist on type 'JSX.IntrinsicElements'

Answer 1

1. A component's props is always an object. Children are passed in the children key inside the object.
2. In Solid, you should not destructure the properties a component receives as that will break the reactivity. Instead, do {props.children}.
3. The Component type by default does not have any children defined. You have to specify all properties yourself.

Final code:

const App: Component<{children: JSX.Element}> = (props) => {
  return (
    <>
      <Navbar />
      <main>
        {props.children}
      </main>
      <Footer />
    </>
  );
}