createRouteMatches

declare function createRouteMatches(
    routes: RouteMatchObject[],
    rawPathname: string
): {
    matchedRoutes: RouteMatchObject[];
    language: string;
};

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

The createRouteMatches is a helper that iterates over route objects array created from createRoutesFromChildren, grabs all the possible Route(s) and provides with matched to the current pathname Route tree.

It's also used internally by <Routes> to generate a matched routes array ready to be rendered on the page.

info

In case, you have configured fixLanguage: true in your **environment ** config file, createRouteMatches will also execute a language fix functionality.

If language has to be fixed for the current pathname createRouteMatches will throw a corrected pathname immediately!

createRouteMatches is responsible for:

• sorting provided <Route>s;
• fixing language/routePrefix;
• finding a matched <Route>;
• enhancing Route objects with Params for the current pathname;
• extracting language from a found Route match;
• throw in case of an unexpected error.

If full match was not found, createRouteMatches will try to get the closest sitting NonMatch <Route>.

<Routes>
    <Route path="/:language?">
        <Route path="s">
            <Route index element={<SearchHome />} />
            <Route path="*" element={<Search404 />} />
        </Route>
        <Route index element={<Home />} />
    </Route>
    <Route path="*" element={<Root404 />} />
</Routes>

// URL "/de/s" => will match <SearchHome />

// URL "/de/s/about" => will match <Search404 />

// URL "/de/products" => will match <Root404 />

Naive structure generated by createRouteMatches:

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: '/' });
const { matchedRoutes, language } = createRouteMatches(routeMatchedObjects, '/de'); // language === 'de'
// simplified structure of "matchedRoutes" to give an idea of a return
const DUMMY_REPRESENTATION_OF_matchedRoutes = [
    {
        segments: ['/:language?'],
        index: undefined,
        path: '/:language?',
        element: <Layout />,
        fallback: null,
        chidlren: [
            {
                segments: ['/:language?', undefined],
                index: true,
                params: { language: 'de' },
                path: '',
                element: <Home />,
                fallback: <Skeleton />
            },
            {
                segments: ['/:language?', 's'],
                index: undefined,
                path: 's',
                element: null,
                fallback: null,
                chidlren: [
                    {
                        segments: ['/:language?', ':first-:second', undefined],
                        index: true,
                        path: '',
                        element: <SearchHome />,
                        fallback: null
                    },
                    {
                        segments: ['/:language?', ':first-:second'],
                        index: false,
                        path: ':first-:second',
                        element: <Search />,
                        fallback: null
                    }
                ]
            }
        ]
    },
    {
        segments: ['/:language?', undefined],
        index: true,
        params: { language: 'de' },
        path: '',
        element: <Home />,
        fallback: <Skeleton />
    }
];