upgrade to react router 7 in lib mode

Author: alan2207

apps/react-vite/.storybook/preview.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BrowserRouter as Router } from 'react-router-dom';
+import { BrowserRouter as Router } from 'react-router';
 import '../src/index.css';
 
 export const parameters = {

apps/react-vite/package.json

@@ -43,7 +43,7 @@
     "react-helmet-async": "^2.0.4",
     "react-hook-form": "^7.51.3",
     "react-query-auth": "^2.3.0",
-    "react-router-dom": "^6.23.0",
+    "react-router": "^7.0.2",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",
     "zod": "^3.23.4",

apps/react-vite/src/app/provider.tsx

@@ -35,15 +35,7 @@ export const AppProvider = ({ children }: AppProviderProps) => {
           <QueryClientProvider client={queryClient}>
             {import.meta.env.DEV && <ReactQueryDevtools />}
             <Notifications />
-            <AuthLoader
-              renderLoading={() => (
-                <div className="flex h-screen w-screen items-center justify-center">
-                  <Spinner size="xl" />
-                </div>
-              )}
-            >
-              {children}
-            </AuthLoader>
+            <AuthLoader>{children}</AuthLoader>
           </QueryClientProvider>
         </HelmetProvider>
       </ErrorBoundary>

apps/react-vite/src/app/router.tsx

@@ -1,34 +1,39 @@
 import { QueryClient, useQueryClient } from '@tanstack/react-query';
 import { useMemo } from 'react';
-import { RouterProvider, createBrowserRouter } from 'react-router-dom';
+import { createBrowserRouter } from 'react-router';
+import { RouterProvider } from 'react-router/dom';
 
 import { paths } from '@/config/paths';
 import { ProtectedRoute } from '@/lib/auth';
 
-import { AppRoot, AppRootErrorBoundary } from './routes/app/root';
+import {
+  default as AppRoot,
+  ErrorBoundary as AppRootErrorBoundary,
+} from './routes/app/root';
+
+const convert = (queryClient: QueryClient) => (m: any) => {
+  const { clientLoader, clientAction, default: Component, ...rest } = m;
+  return {
+    ...rest,
+    loader: clientLoader?.(queryClient),
+    action: clientAction?.(queryClient),
+    Component,
+  };
+};
 
 export const createAppRouter = (queryClient: QueryClient) =>
   createBrowserRouter([
     {
       path: paths.home.path,
-      lazy: async () => {
-        const { LandingRoute } = await import('./routes/landing');
-        return { Component: LandingRoute };
-      },
+      lazy: () => import('./routes/landing').then(convert(queryClient)),
     },
     {
       path: paths.auth.register.path,
-      lazy: async () => {
-        const { RegisterRoute } = await import('./routes/auth/register');
-        return { Component: RegisterRoute };
-      },
+      lazy: () => import('./routes/auth/register').then(convert(queryClient)),
     },
     {
       path: paths.auth.login.path,
-      lazy: async () => {
-        const { LoginRoute } = await import('./routes/auth/login');
-        return { Component: LoginRoute };
-      },
+      lazy: () => import('./routes/auth/login').then(convert(queryClient)),
     },
     {
       path: paths.app.root.path,
@@ -41,74 +46,36 @@ export const createAppRouter = (queryClient: QueryClient) =>
       children: [
         {
           path: paths.app.discussions.path,
-          lazy: async () => {
-            const { DiscussionsRoute, discussionsLoader } = await import(
-              './routes/app/discussions/discussions'
-            );
-            return {
-              Component: DiscussionsRoute,
-              loader: discussionsLoader(queryClient),
-            };
-          },
-          ErrorBoundary: AppRootErrorBoundary,
+          lazy: () =>
+            import('./routes/app/discussions/discussions').then(
+              convert(queryClient),
+            ),
         },
         {
           path: paths.app.discussion.path,
-          lazy: async () => {
-            const { DiscussionRoute, discussionLoader } = await import(
-              './routes/app/discussions/discussion'
-            );
-            return {
-              Component: DiscussionRoute,
-              loader: discussionLoader(queryClient),
-            };
-          },
-          ErrorBoundary: AppRootErrorBoundary,
+          lazy: () =>
+            import('./routes/app/discussions/discussion').then(
+              convert(queryClient),
+            ),
         },
         {
           path: paths.app.users.path,
-          lazy: async () => {
-            const { UsersRoute, usersLoader } = await import(
-              './routes/app/users'
-            );
-            return {
-              Component: UsersRoute,
-              loader: usersLoader(queryClient),
-            };
-          },
-          ErrorBoundary: AppRootErrorBoundary,
+          lazy: () => import('./routes/app/users').then(convert(queryClient)),
         },
         {
           path: paths.app.profile.path,
-          lazy: async () => {
-            const { ProfileRoute } = await import('./routes/app/profile');
-            return {
-              Component: ProfileRoute,
-            };
-          },
-          ErrorBoundary: AppRootErrorBoundary,
+          lazy: () => import('./routes/app/profile').then(convert(queryClient)),
         },
         {
           path: paths.app.dashboard.path,
-          lazy: async () => {
-            const { DashboardRoute } = await import('./routes/app/dashboard');
-            return {
-              Component: DashboardRoute,
-            };
-          },
-          ErrorBoundary: AppRootErrorBoundary,
+          lazy: () =>
+            import('./routes/app/dashboard').then(convert(queryClient)),
         },
       ],
     },
     {
       path: '*',
-      lazy: async () => {
-        const { NotFoundRoute } = await import('./routes/not-found');
-        return {
-          Component: NotFoundRoute,
-        };
-      },
-      ErrorBoundary: AppRootErrorBoundary,
+      lazy: () => import('./routes/not-found').then(convert(queryClient)),
     },
   ]);
 

apps/react-vite/src/app/routes/app/dashboard.tsx

@@ -2,7 +2,7 @@ import { ContentLayout } from '@/components/layouts';
 import { useUser } from '@/lib/auth';
 import { ROLES } from '@/lib/authorization';
 
-export const DashboardRoute = () => {
+const DashboardRoute = () => {
   const user = useUser();
   return (
     <ContentLayout title="Dashboard">
@@ -31,3 +31,5 @@ export const DashboardRoute = () => {
     </ContentLayout>
   );
 };
+
+export default DashboardRoute;

apps/react-vite/src/app/routes/app/discussions/__tests__/discussion.test.tsx

@@ -8,7 +8,7 @@ import {
   within,
 } from '@/testing/test-utils';
 
-import { DiscussionRoute } from '../discussion';
+import { default as DiscussionRoute } from '../discussion';
 
 const renderDiscussion = async () => {
   const fakeUser = await createUser();

apps/react-vite/src/app/routes/app/discussions/__tests__/discussions.test.tsx

@@ -10,7 +10,7 @@ import {
 } from '@/testing/test-utils';
 import { formatDate } from '@/utils/format';
 
-import { DiscussionsRoute } from '../discussions';
+import { default as DiscussionsRoute } from '../discussions';
 
 beforeAll(() => {
   vi.spyOn(console, 'error').mockImplementation(() => {});

apps/react-vite/src/app/routes/app/discussions/discussion.tsx

@@ -1,6 +1,6 @@
 import { QueryClient } from '@tanstack/react-query';
 import { ErrorBoundary } from 'react-error-boundary';
-import { useParams, LoaderFunctionArgs } from 'react-router-dom';
+import { useParams, LoaderFunctionArgs } from 'react-router';
 
 import { ContentLayout } from '@/components/layouts';
 import { Spinner } from '@/components/ui/spinner';
@@ -12,7 +12,7 @@ import {
 } from '@/features/discussions/api/get-discussion';
 import { DiscussionView } from '@/features/discussions/components/discussion-view';
 
-export const discussionLoader =
+export const clientLoader =
   (queryClient: QueryClient) =>
   async ({ params }: LoaderFunctionArgs) => {
     const discussionId = params.discussionId as string;
@@ -35,7 +35,7 @@ export const discussionLoader =
     };
   };
 
-export const DiscussionRoute = () => {
+const DiscussionRoute = () => {
   const params = useParams();
   const discussionId = params.discussionId as string;
   const discussionQuery = useDiscussion({
@@ -71,3 +71,5 @@ export const DiscussionRoute = () => {
     </>
   );
 };
+
+export default DiscussionRoute;

apps/react-vite/src/app/routes/app/discussions/discussions.tsx

@@ -1,13 +1,13 @@
 import { QueryClient, useQueryClient } from '@tanstack/react-query';
-import { LoaderFunctionArgs } from 'react-router-dom';
+import { LoaderFunctionArgs } from 'react-router';
 
 import { ContentLayout } from '@/components/layouts';
 import { getInfiniteCommentsQueryOptions } from '@/features/comments/api/get-comments';
 import { getDiscussionsQueryOptions } from '@/features/discussions/api/get-discussions';
 import { CreateDiscussion } from '@/features/discussions/components/create-discussion';
 import { DiscussionsList } from '@/features/discussions/components/discussions-list';
 
-export const discussionsLoader =
+export const clientLoader =
   (queryClient: QueryClient) =>
   async ({ request }: LoaderFunctionArgs) => {
     const url = new URL(request.url);
@@ -22,7 +22,7 @@ export const discussionsLoader =
     );
   };
 
-export const DiscussionsRoute = () => {
+const DiscussionsRoute = () => {
   const queryClient = useQueryClient();
   return (
     <ContentLayout title="Discussions">
@@ -42,3 +42,5 @@ export const DiscussionsRoute = () => {
     </ContentLayout>
   );
 };
+
+export default DiscussionsRoute;

apps/react-vite/src/app/routes/app/profile.tsx

@@ -15,7 +15,7 @@ const Entry = ({ label, value }: EntryProps) => (
   </div>
 );
 
-export const ProfileRoute = () => {
+const ProfileRoute = () => {
   const user = useUser();
 
   if (!user.data) return null;
@@ -47,3 +47,5 @@ export const ProfileRoute = () => {
     </ContentLayout>
   );
 };
+
+export default ProfileRoute;