Ask for variation of `unstable_useRoute` that returns undefined if no data loaded #14532

mw10013 · 2025-11-13T04:50:43Z

mw10013
Nov 13, 2025

The docs for Layout direct you to use useRouteLoaderData since Layout may be used with an ErrorBoundary and there may be no data due an error. useRouteLoaderData return any.

Ask for variation of unstable_useRoute that returns undefined if no data loaded. The any from useRouteLoaderData can make code a bit noisy. Would be great to have an actual type | undefined.

https://github.com/mw10013/oui/blob/aca512998e117f6901b386557cc3052376ce201c/app/root.tsx#L101-L123

export function Layout({ children }: { children: React.ReactNode }) {
  // Layout is used by ErrorBoundary where there may be no loader data so cannot use unstable_useRoute
  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
  const data = ReactRouter.useRouteLoaderData("root");
  return (
    <RemixThemes.ThemeProvider
      // ?? ensures undefined (from missing loader data) becomes null for ThemeProvider type
      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
      specifiedTheme={data?.loaderData?.theme ?? null}
      themeAction="/action/set-theme"
      disableTransitionOnThemeChange
    >
      <Html
        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
        ssrTheme={Boolean(data?.loaderData?.theme)}
        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
        isAnalyticsEnabled={Boolean(data?.loaderData?.isAnalyticsEnabled)}
      >
        {children}
      </Html>
    </RemixThemes.ThemeProvider>
  );
}

brookslybrand · 2025-11-13T15:15:29Z

brookslybrand
Nov 13, 2025
Maintainer

I'm not sure I understand the request, unstable_useRoute does return undefined if the data is not available, and that's reflected in the types

changelog

useRoute returns undefined if the route is not part of the current page:

export function AdminWidget() {
  const admin = useRoute("routes/admin");
  if (!admin) {
    throw new Error(`AdminWidget used outside of "routes/admin"`);
  }
}

0 replies

mw10013 · 2025-11-13T15:34:30Z

mw10013
Nov 13, 2025
Author

Indeed. I was mistaken and confused. Thanks for setting me straight!

https://github.com/mw10013/oui/blob/1a443ec94b35fcb0e9da5595212b8c996e0958ff/app/root.tsx#L101-L117

export function Layout({ children }: { children: React.ReactNode }) {
  const data = ReactRouter.unstable_useRoute("root");
  return (
    <RemixThemes.ThemeProvider
      specifiedTheme={data.loaderData?.theme ?? null}
      themeAction="/action/set-theme"
      disableTransitionOnThemeChange
    >
      <Html
        ssrTheme={Boolean(data.loaderData?.theme)}
        isAnalyticsEnabled={Boolean(data.loaderData?.isAnalyticsEnabled)}
      >
        {children}
      </Html>
    </RemixThemes.ThemeProvider>
  );
}

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Ask for variation of `unstable_useRoute` that returns undefined if no data loaded #14532

Uh oh!

{{title}}

Uh oh!

Replies: 2 comments

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Ask for variation of unstable_useRoute that returns undefined if no data loaded #14532

Uh oh!

mw10013 Nov 13, 2025

Replies: 2 comments

Uh oh!

brookslybrand Nov 13, 2025 Maintainer

Uh oh!

mw10013 Nov 13, 2025 Author

Ask for variation of `unstable_useRoute` that returns undefined if no data loaded #14532

mw10013
Nov 13, 2025

brookslybrand
Nov 13, 2025
Maintainer

mw10013
Nov 13, 2025
Author