Type safe children with React and TypeScript https://twitter.com/nickemccurdy/status/1583036771415519232

index.tsx

import {
  ComponentType,
  createElement,
  FunctionComponent,
  ReactElement,
  ReactNode,
} from "react"

interface RouteProps {
  path?: string
  element?: ReactNode
}

declare const Route: FunctionComponent<RouteProps>

declare const Routes: ComponentType<{
  children?:
    | ReactElement<RouteProps, typeof Route>
    | ReactElement<RouteProps, typeof Route>[]
}>

declare const HomePage: ComponentType

export default function App() {
  return (
    <Routes>
      {[
        createElement(Route, { path: "/", element: <HomePage /> }),
        // @ts-expect-error
        createElement("p", null, "Oops! This is not a route."),
      ]}
    </Routes>
  )
}