How can i split my routes from my CustomRouteProvider

[rory-ferguson]

I've set up my custom RouteProvider below so i can pass data to the loader from my context.

The issue I have is, I would like to export the routes const so it can be used elsewhere, like a tests file to create a MemoryRouter instead of the BrowserRouter i'm using.

export const AppRouter = () => {
  const { profile } = useAuth();

  const routes = (
    <>
      <Route path="/*">
          <Route id="actionLogs" loader={async () => fetchActionLogs(profile)}>
          // rest of routes
          </Route>
      </Route>
    </>
  );


  const router = createBrowserRouter(createRoutesFromElements(routes));

  return <RouterProvider router={router} />;
};

[rory-ferguson]

To illustrate my example, something like this, yes, i know this wouldn't work

const routes = (profile) => (
  <>
    <Route path="*" element={<ErrorPage />} />
    <Route path="/*">
      <Route id="actionLogs" loader={async () => fetchActionLogs(profile)}>
      // rest of routes
      </Route>
  </>
);

export const AppRouter = () => {
  const { profile } = useAuth();

  const router = createBrowserRouter(createRoutesFromElements(routes(profile)));

  return <RouterProvider router={router} />;
};

[rory-ferguson]

Or a suggestion how i could pass in context to the function the loader uses, or anything.

[brophdawg11]

You can't use data APIs within descendant <Routes> (docs), so this won't work:

<Route path="/*">
  <Route id="actionLogs" loader={async () => fetchActionLogs(profile)}>
    // rest of routes
    </Route>
</Route>

You can't access React hook values in loaders because the navigation data loading is entirely decoupled from the react render lifecycle and happens before any rendering. So at the time the hooks run there has been no react render to provide a hook-driven value.

Usually the answer here is to find the route source of truth for useAuth(). Does it read from some other global state? A cookie? That data is available somewhere client side so it can be put into a provider that the hook reads from. Find the source of truth data it is surfacing and use that in your loaders defined outside of the react render tree.