[v6][Feature]Generic createRoutesFromChildren

[Grapedge]

Maybe there are some usages like this, we can customize our own Route,

type MyRouteProps = (PathRouteProps | LayoutRouteProps | IndexRouteProps) & {
  title?: string
  meta?: RouteMeta
  // ...
}

const MyRoute: React.FC = (props: MyRouteProps) => {
  throw new Error()
}

and then use createRoutesFromChildren to create an array of routes:

// src/routes.ts
export default createRoutesFromChildren(
  <>
    <MyRoute path="posts">
      <MyRoute
        index
        title="PostIndex"
        element={<PostPage />}
        breadcrumb={<PostBreadCrumb />}
      />
    </MyRoute>
    <MyRoute path="*" element={<NotFoundPage />} title="Not Found" />
  </>
)

This use case requires the createRoutesFromChildren function to return props correctly. But now it only strictly returns RouteObject.

Maybe this feature can be added? This will make routing configuration more flexible.

function <T extends RouteObject = RouteObject>createRoutesFromChildren(children: React.ReactNode): <T[]>;

[timdorr]

Custom Route objects aren't supported anymore.

#8111 (comment)

and

#8092 (comment)

[Grapedge]

Custom Route objects aren't supported anymore.

Thanks for your reply, but I think you misunderstood what I mean because I am not using it to render. Sometimes, the JSX format is easier to read and maintain, so I want to use createRoutesFromChildren to build my own routes, just like this:

const routes = createRoutesFromChildren<MyRouteObject>(
  <>
    <MyRoute path="/" element={<div />} meta={{ routeCode: 'xxx', author: 'xxx' }} />
  </>
)

// in App
const App = () => useRoutes(routes)