Skip to content

Commit b0fb641

Browse files
alan2207alan2207
committed
upgrade to react router 7 in lib mode
1 parent a55e984 commit b0fb641

26 files changed

+178
-151
lines changed

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { BrowserRouter as Router } from 'react-router-dom';
2+
import { BrowserRouter as Router } from 'react-router';
33
import '../src/index.css';
44

55
export const parameters = {

‎apps/react-vite/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343
"react-helmet-async": "^2.0.4",
4444
"react-hook-form": "^7.51.3",
4545
"react-query-auth": "^2.3.0",
46-
"react-router-dom": "^6.23.0",
46+
"react-router": "^7.0.2",
4747
"tailwind-merge": "^2.3.0",
4848
"tailwindcss-animate": "^1.0.7",
4949
"zod": "^3.23.4",

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

+1-9
Original file line numberDiff line numberDiff line change
@@ -35,15 +35,7 @@ export const AppProvider = ({ children }: AppProviderProps) => {
3535
<QueryClientProvider client={queryClient}>
3636
{import.meta.env.DEV && <ReactQueryDevtools />}
3737
<Notifications />
38-
<AuthLoader
39-
renderLoading={() => (
40-
<div className="flex h-screen w-screen items-center justify-center">
41-
<Spinner size="xl" />
42-
</div>
43-
)}
44-
>
45-
{children}
46-
</AuthLoader>
38+
<AuthLoader>{children}</AuthLoader>
4739
</QueryClientProvider>
4840
</HelmetProvider>
4941
</ErrorBoundary>

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

+32-65
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,39 @@
11
import { QueryClient, useQueryClient } from '@tanstack/react-query';
22
import { useMemo } from 'react';
3-
import { RouterProvider, createBrowserRouter } from 'react-router-dom';
3+
import { createBrowserRouter } from 'react-router';
4+
import { RouterProvider } from 'react-router/dom';
45

56
import { paths } from '@/config/paths';
67
import { ProtectedRoute } from '@/lib/auth';
78

8-
import { AppRoot, AppRootErrorBoundary } from './routes/app/root';
9+
import {
10+
default as AppRoot,
11+
ErrorBoundary as AppRootErrorBoundary,
12+
} from './routes/app/root';
13+
14+
const convert = (queryClient: QueryClient) => (m: any) => {
15+
const { clientLoader, clientAction, default: Component, ...rest } = m;
16+
return {
17+
...rest,
18+
loader: clientLoader?.(queryClient),
19+
action: clientAction?.(queryClient),
20+
Component,
21+
};
22+
};
923

1024
export const createAppRouter = (queryClient: QueryClient) =>
1125
createBrowserRouter([
1226
{
1327
path: paths.home.path,
14-
lazy: async () => {
15-
const { LandingRoute } = await import('./routes/landing');
16-
return { Component: LandingRoute };
17-
},
28+
lazy: () => import('./routes/landing').then(convert(queryClient)),
1829
},
1930
{
2031
path: paths.auth.register.path,
21-
lazy: async () => {
22-
const { RegisterRoute } = await import('./routes/auth/register');
23-
return { Component: RegisterRoute };
24-
},
32+
lazy: () => import('./routes/auth/register').then(convert(queryClient)),
2533
},
2634
{
2735
path: paths.auth.login.path,
28-
lazy: async () => {
29-
const { LoginRoute } = await import('./routes/auth/login');
30-
return { Component: LoginRoute };
31-
},
36+
lazy: () => import('./routes/auth/login').then(convert(queryClient)),
3237
},
3338
{
3439
path: paths.app.root.path,
@@ -41,74 +46,36 @@ export const createAppRouter = (queryClient: QueryClient) =>
4146
children: [
4247
{
4348
path: paths.app.discussions.path,
44-
lazy: async () => {
45-
const { DiscussionsRoute, discussionsLoader } = await import(
46-
'./routes/app/discussions/discussions'
47-
);
48-
return {
49-
Component: DiscussionsRoute,
50-
loader: discussionsLoader(queryClient),
51-
};
52-
},
53-
ErrorBoundary: AppRootErrorBoundary,
49+
lazy: () =>
50+
import('./routes/app/discussions/discussions').then(
51+
convert(queryClient),
52+
),
5453
},
5554
{
5655
path: paths.app.discussion.path,
57-
lazy: async () => {
58-
const { DiscussionRoute, discussionLoader } = await import(
59-
'./routes/app/discussions/discussion'
60-
);
61-
return {
62-
Component: DiscussionRoute,
63-
loader: discussionLoader(queryClient),
64-
};
65-
},
66-
ErrorBoundary: AppRootErrorBoundary,
56+
lazy: () =>
57+
import('./routes/app/discussions/discussion').then(
58+
convert(queryClient),
59+
),
6760
},
6861
{
6962
path: paths.app.users.path,
70-
lazy: async () => {
71-
const { UsersRoute, usersLoader } = await import(
72-
'./routes/app/users'
73-
);
74-
return {
75-
Component: UsersRoute,
76-
loader: usersLoader(queryClient),
77-
};
78-
},
79-
ErrorBoundary: AppRootErrorBoundary,
63+
lazy: () => import('./routes/app/users').then(convert(queryClient)),
8064
},
8165
{
8266
path: paths.app.profile.path,
83-
lazy: async () => {
84-
const { ProfileRoute } = await import('./routes/app/profile');
85-
return {
86-
Component: ProfileRoute,
87-
};
88-
},
89-
ErrorBoundary: AppRootErrorBoundary,
67+
lazy: () => import('./routes/app/profile').then(convert(queryClient)),
9068
},
9169
{
9270
path: paths.app.dashboard.path,
93-
lazy: async () => {
94-
const { DashboardRoute } = await import('./routes/app/dashboard');
95-
return {
96-
Component: DashboardRoute,
97-
};
98-
},
99-
ErrorBoundary: AppRootErrorBoundary,
71+
lazy: () =>
72+
import('./routes/app/dashboard').then(convert(queryClient)),
10073
},
10174
],
10275
},
10376
{
10477
path: '*',
105-
lazy: async () => {
106-
const { NotFoundRoute } = await import('./routes/not-found');
107-
return {
108-
Component: NotFoundRoute,
109-
};
110-
},
111-
ErrorBoundary: AppRootErrorBoundary,
78+
lazy: () => import('./routes/not-found').then(convert(queryClient)),
11279
},
11380
]);
11481

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

+3-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { ContentLayout } from '@/components/layouts';
22
import { useUser } from '@/lib/auth';
33
import { ROLES } from '@/lib/authorization';
44

5-
export const DashboardRoute = () => {
5+
const DashboardRoute = () => {
66
const user = useUser();
77
return (
88
<ContentLayout title="Dashboard">
@@ -31,3 +31,5 @@ export const DashboardRoute = () => {
3131
</ContentLayout>
3232
);
3333
};
34+
35+
export default DashboardRoute;

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
within,
99
} from '@/testing/test-utils';
1010

11-
import { DiscussionRoute } from '../discussion';
11+
import { default as DiscussionRoute } from '../discussion';
1212

1313
const renderDiscussion = async () => {
1414
const fakeUser = await createUser();

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {
1010
} from '@/testing/test-utils';
1111
import { formatDate } from '@/utils/format';
1212

13-
import { DiscussionsRoute } from '../discussions';
13+
import { default as DiscussionsRoute } from '../discussions';
1414

1515
beforeAll(() => {
1616
vi.spyOn(console, 'error').mockImplementation(() => {});

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

+5-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { QueryClient } from '@tanstack/react-query';
22
import { ErrorBoundary } from 'react-error-boundary';
3-
import { useParams, LoaderFunctionArgs } from 'react-router-dom';
3+
import { useParams, LoaderFunctionArgs } from 'react-router';
44

55
import { ContentLayout } from '@/components/layouts';
66
import { Spinner } from '@/components/ui/spinner';
@@ -12,7 +12,7 @@ import {
1212
} from '@/features/discussions/api/get-discussion';
1313
import { DiscussionView } from '@/features/discussions/components/discussion-view';
1414

15-
export const discussionLoader =
15+
export const clientLoader =
1616
(queryClient: QueryClient) =>
1717
async ({ params }: LoaderFunctionArgs) => {
1818
const discussionId = params.discussionId as string;
@@ -35,7 +35,7 @@ export const discussionLoader =
3535
};
3636
};
3737

38-
export const DiscussionRoute = () => {
38+
const DiscussionRoute = () => {
3939
const params = useParams();
4040
const discussionId = params.discussionId as string;
4141
const discussionQuery = useDiscussion({
@@ -71,3 +71,5 @@ export const DiscussionRoute = () => {
7171
</>
7272
);
7373
};
74+
75+
export default DiscussionRoute;

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

+5-3
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import { QueryClient, useQueryClient } from '@tanstack/react-query';
2-
import { LoaderFunctionArgs } from 'react-router-dom';
2+
import { LoaderFunctionArgs } from 'react-router';
33

44
import { ContentLayout } from '@/components/layouts';
55
import { getInfiniteCommentsQueryOptions } from '@/features/comments/api/get-comments';
66
import { getDiscussionsQueryOptions } from '@/features/discussions/api/get-discussions';
77
import { CreateDiscussion } from '@/features/discussions/components/create-discussion';
88
import { DiscussionsList } from '@/features/discussions/components/discussions-list';
99

10-
export const discussionsLoader =
10+
export const clientLoader =
1111
(queryClient: QueryClient) =>
1212
async ({ request }: LoaderFunctionArgs) => {
1313
const url = new URL(request.url);
@@ -22,7 +22,7 @@ export const discussionsLoader =
2222
);
2323
};
2424

25-
export const DiscussionsRoute = () => {
25+
const DiscussionsRoute = () => {
2626
const queryClient = useQueryClient();
2727
return (
2828
<ContentLayout title="Discussions">
@@ -42,3 +42,5 @@ export const DiscussionsRoute = () => {
4242
</ContentLayout>
4343
);
4444
};
45+
46+
export default DiscussionsRoute;

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

+3-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ const Entry = ({ label, value }: EntryProps) => (
1515
</div>
1616
);
1717

18-
export const ProfileRoute = () => {
18+
const ProfileRoute = () => {
1919
const user = useUser();
2020

2121
if (!user.data) return null;
@@ -47,3 +47,5 @@ export const ProfileRoute = () => {
4747
</ContentLayout>
4848
);
4949
};
50+
51+
export default ProfileRoute;

‎apps/react-vite/src/app/routes/app/root.tsx

+7-5
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
1-
import { Outlet } from 'react-router-dom';
1+
import { Outlet } from 'react-router';
22

33
import { DashboardLayout } from '@/components/layouts';
44

5-
export const AppRoot = () => {
5+
export const ErrorBoundary = () => {
6+
return <div>Something went wrong!</div>;
7+
};
8+
9+
const AppRoot = () => {
610
return (
711
<DashboardLayout>
812
<Outlet />
913
</DashboardLayout>
1014
);
1115
};
1216

13-
export const AppRootErrorBoundary = () => {
14-
return <div>Something went wrong!</div>;
15-
};
17+
export default AppRoot;

‎apps/react-vite/src/app/routes/app/users.tsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { getUsersQueryOptions } from '@/features/users/api/get-users';
55
import { UsersList } from '@/features/users/components/users-list';
66
import { Authorization, ROLES } from '@/lib/authorization';
77

8-
export const usersLoader = (queryClient: QueryClient) => async () => {
8+
export const clientLoader = (queryClient: QueryClient) => async () => {
99
const query = getUsersQueryOptions();
1010

1111
return (
@@ -14,7 +14,7 @@ export const usersLoader = (queryClient: QueryClient) => async () => {
1414
);
1515
};
1616

17-
export const UsersRoute = () => {
17+
const UsersRoute = () => {
1818
return (
1919
<ContentLayout title="Users">
2020
<Authorization
@@ -26,3 +26,5 @@ export const UsersRoute = () => {
2626
</ContentLayout>
2727
);
2828
};
29+
30+
export default UsersRoute;

‎apps/react-vite/src/app/routes/auth/login.tsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import { useNavigate, useSearchParams } from 'react-router-dom';
1+
import { useNavigate, useSearchParams } from 'react-router';
22

33
import { AuthLayout } from '@/components/layouts/auth-layout';
44
import { paths } from '@/config/paths';
55
import { LoginForm } from '@/features/auth/components/login-form';
66

7-
export const LoginRoute = () => {
7+
const LoginRoute = () => {
88
const navigate = useNavigate();
99
const [searchParams] = useSearchParams();
1010
const redirectTo = searchParams.get('redirectTo');
@@ -24,3 +24,5 @@ export const LoginRoute = () => {
2424
</AuthLayout>
2525
);
2626
};
27+
28+
export default LoginRoute;

‎apps/react-vite/src/app/routes/auth/register.tsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import { useState } from 'react';
2-
import { useNavigate, useSearchParams } from 'react-router-dom';
2+
import { useNavigate, useSearchParams } from 'react-router';
33

44
import { AuthLayout } from '@/components/layouts/auth-layout';
55
import { paths } from '@/config/paths';
66
import { RegisterForm } from '@/features/auth/components/register-form';
77
import { useTeams } from '@/features/teams/api/get-teams';
88

9-
export const RegisterRoute = () => {
9+
const RegisterRoute = () => {
1010
const navigate = useNavigate();
1111
const [searchParams] = useSearchParams();
1212
const redirectTo = searchParams.get('redirectTo');
@@ -36,3 +36,5 @@ export const RegisterRoute = () => {
3636
</AuthLayout>
3737
);
3838
};
39+
40+
export default RegisterRoute;

‎apps/react-vite/src/app/routes/landing.tsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
import { useNavigate } from 'react-router-dom';
1+
import { useNavigate } from 'react-router';
22

33
import logo from '@/assets/logo.svg';
44
import { Head } from '@/components/seo';
55
import { Button } from '@/components/ui/button';
66
import { paths } from '@/config/paths';
77
import { useUser } from '@/lib/auth';
88

9-
export const LandingRoute = () => {
9+
const LandingRoute = () => {
1010
const navigate = useNavigate();
1111
const user = useUser();
1212

@@ -84,3 +84,5 @@ export const LandingRoute = () => {
8484
</>
8585
);
8686
};
87+
88+
export default LandingRoute;

0 commit comments

Comments
 (0)