I'm currently working on implementing routing into my application using react-router-dom V6, specifically utilizing the new createBrowserRouter function and RouterProvider component.
The issue I'm facing is that when attempting to integrate a loader for the routes (such as the themeLoader), the loader gets triggered right after the router is created in App.tsx.
Although this behavior is expected only on the theme route, it causes problems as the loader fires before the authentication process has even begun or completed, while the queries it initiates require an authenticated user.
Is there a way to delay the execution of the loader until after the authentication process has finished? I've experimented with using shouldRevalidate, but it doesn't prevent the initial firing of the loader.
// PrivateRoute.tsx
function PrivateRoute(Props: PrivateRouteProps) {
console.log('PrivateRoute!');
// Authentication logic here
if (isAuthenticating) return <div>Authenticating...</div>;
return !isUnauthorised ? <Outlet /> : <div>{'Unauthorised Access'}</div>;
}
// Theme.tsx
export async function themeLoader({ params }: LoaderProps) {
console.log('themeLoader!');
const query = store.dispatch(getTheme(params.theme));
const { data: theme } = await query;
query.unsubscribe();
if (theme === undefined)
throw new Response('Theme Not Found', { status: 404 });
return theme;
}
// Routes
const themeRoute = {
path: 'themes/:theme',
element: <ThemePage />,
loader: themeLoader
};
const parentRoute = {
path: '/',
element: <PrivateRoute authorisedRoles={MemberRoles} />,
errorElement: <RouteBoundary />,
children: [themeRoute]
};
// App.tsx
const router = createBrowserRouter([parentRoute]);
// The themeLoader fires at this point...
function App() {
console.log('App!');
return <RouterProvider router={router} />;
}
// Console Output
themeLoader!
App!
RouteBoundary!
// Expected Output
App!
PrivateRoute!
themeLoader!