createRoutesFromChildren

declare function createRoutesFromChildren(args: RoutesFromChildrenProps): RouteMatchObject[];

type RoutesFromChildrenProps = {
    basePrefix?: string;
    children: ReactNode;
    parentRouteObject?: RouteMatchObject | null;
    pathname: string;
    rootFallback?: NonNullable<ReactNode> | null;
};

type RouteMatchObject = Omit<RouteProps, 'children'> & {
    children?: RouteMatchObject[];
    fallback?: NonNullable<ReactNode> | null;
    params: Params;
    pathname: string;
    pathnameBase?: string;
    pattern: URLPattern;
    segments: string[];
    prefetch?: PrefetchFunction;
};

The createRoutesFromChildren is a helper that filters out from children all non-Route components and creates array of Route-like objects with the necessary attributes to process further.

It's also used internally by <Routes> to generate a route objects from its <Route> children.

Important

createRoutesFromChildren supports wrapped into Fragment <Route> components.

However, any other wrapping: html tags or other components is not supported and all the <Route>s defined outside of <Routes> will be ignored/skipped.

const routesJSX = (
    <Route path="/:language?" element={<Layout />}>
        {/* COMMENT */}
        <Route path="s">
            <>
                <Route path=":first-:second" element={<Search />} />
                <Route index element={<SearchHome />} />
            </>
        </Route>
        <div>
            {/* should be skipped */}
            <Route path="nowhere" element={<Nowhere />} />
        </div>
        <Route index element={<Home />} fallback={<Skeleton />} />
    </Route>
);

const routeMatchedObjects = createRoutesFromChildren({ children: routesJSX, pathname: '/de', basePrefix: '/' });
// simplified structure of "routeMatchedObjects" to give an idea of a return
const DUMMY_REPRESENTATION_OF_routeMatchedObjects = [
    {
        segments: ['/:language?'],
        index: undefined,
        path: '/:language?',
        element: <Layout />,
        fallback: null,
        chidlren: [
            {
                segments: ['/:language?', 's'],
                index: undefined,
                path: 's',
                element: null,
                fallback: null,
                chidlren: [
                    {
                        segments: ['/:language?', ':first-:second'],
                        index: false,
                        path: ':first-:second',
                        element: <Search />,
                        fallback: null
                    },
                    {
                        segments: ['/:language?', ':first-:second', undefined],
                        index: true,
                        path: '',
                        element: <SearchHome />,
                        fallback: null
                    }
                ]
            },
            {
                segments: ['/:language?', undefined],
                index: true,
                path: '',
                element: <Home />,
                fallback: <Skeleton />
            }
        ]
    }
];