feat: migrate from react router to tanstack router

Pettor · Pettor · commit 0d27160070e0 · 2025-10-11T19:28:20.000+02:00
diff --git a/.gitignore b/.gitignore
@@ -11,6 +11,9 @@ lerna-debug.log*
 node_modules
 *.local
 
+# TanStack Router
+routeTree.gen.ts
+
 # Build files
 .nyc_output
 .junit
@@ -35,3 +38,6 @@ storybook-static/
 *.njsproj
 *.sln
 *.sw?
+
+# Ai
+.claude/
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -28,14 +28,14 @@
     "@package/ui": "workspace:*",
     "@tanstack/react-form": "1.19.3",
     "@tanstack/react-query": "5.83.0",
+    "@tanstack/react-router": "^1.103.2",
     "clsx": "2.1.1",
     "immer": "10.1.1",
     "jotai": "2.13.1",
     "jotai-effect": "2.1.0",
     "react": "catalog:react19",
     "react-dom": "catalog:react19",
     "react-intl": "7.1.11",
-    "react-router-dom": "7.8.2",
     "zod": "catalog:validation"
   },
   "devDependencies": {
@@ -46,6 +46,7 @@
     "@package/storybook": "workspace:*",
     "@storybook/react": "catalog:storybook",
     "@tailwindcss/vite": "catalog:tailwind",
+    "@tanstack/router-plugin": "^1.103.0",
     "@vitejs/plugin-basic-ssl": "catalog:vite",
     "@vitejs/plugin-react": "catalog:vite",
     "babel-plugin-react-compiler": "catalog:react19",
diff --git a/apps/web/src/classes/app-session/UseAppSessionContent.ts b/apps/web/src/classes/app-session/UseAppSessionContent.ts
@@ -1,10 +1,10 @@
 import { useMemo } from "react";
 import { useFetchPersonalProfileQuery } from "@package/api";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "@tanstack/react-router";
 import type { IAppSessionContent } from "./IAppSessionContent";
 import { useAuth } from "~/core/auth/UseAuth";
 
-export function useAppSessionContent(aboutRoute: string = "/about"): IAppSessionContent {
+export function useAppSessionContent(aboutRoute: string = "/version"): IAppSessionContent {
   const navigate = useNavigate();
   const { logout } = useAuth();
   const { data: profileInfo } = useFetchPersonalProfileQuery();
@@ -30,7 +30,7 @@ export function useAppSessionContent(aboutRoute: string = "/about"): IAppSession
   }
 
   function handleOnAbout(): void {
-    navigate(aboutRoute);
+    navigate({ to: aboutRoute as "/version" });
   }
 
   return {
diff --git a/apps/web/src/core/routes/AppRoutes.tsx b/apps/web/src/core/routes/AppRoutes.tsx
@@ -1,33 +1,31 @@
 import type { ReactElement } from "react";
 import { useQueryClient } from "@tanstack/react-query";
-import { RouterProvider, Route, createHashRouter, createRoutesFromElements, Outlet } from "react-router-dom";
-import { PrivateRouteLogic } from "./logic/PrivateRouteLogic";
-import { PublicRouteLogic } from "./logic/PublicRouteLogic";
-import { PrivateRoutes } from "./PrivateRoutes";
-import { PublicRoutes } from "./PublicRoutes";
+import { RouterProvider, createHashHistory, createRouter } from "@tanstack/react-router";
+import { useAuth } from "../auth/UseAuth";
+import { routeTree } from "../../routeTree.gen";
+
+const hashHistory = createHashHistory();
+
+const router = createRouter({
+  routeTree,
+  history: hashHistory,
+  context: {
+    queryClient: undefined!,
+    authStatus: undefined!,
+  },
+  defaultPreload: "intent",
+  defaultPreloadStaleTime: 0,
+});
+
+declare module "@tanstack/react-router" {
+  interface Register {
+    router: typeof router;
+  }
+}
 
 export function AppRoutes(): ReactElement {
   const queryClient = useQueryClient();
+  const { status } = useAuth();
 
-  return (
-    <RouterProvider
-      router={createHashRouter(
-        createRoutesFromElements(
-          <Route path="/" element={<Outlet />}>
-            <Route element={<PublicRouteLogic />}>
-              {PublicRoutes(queryClient).map((route) => (
-                <Route key={route.path} {...route} />
-              ))}
-            </Route>
-            <Route element={<PrivateRouteLogic />}>
-              {PrivateRoutes(queryClient).map((route) => (
-                <Route key={route.path} {...route} />
-              ))}
-            </Route>
-            <Route path="*" lazy={() => import("../../pages/not-found/NotFoundRoute")} />
-          </Route>
-        )
-      )}
-    />
-  );
+  return <RouterProvider router={router} context={{ queryClient, authStatus: status }} />;
 }
diff --git a/apps/web/src/pages/about/UseAboutPage.ts b/apps/web/src/pages/about/UseAboutPage.ts
@@ -1,13 +1,13 @@
-import { useNavigate } from "react-router-dom";
+import { useRouter } from "@tanstack/react-router";
 import type { AboutViewProps } from "~/components/views/about/AboutView";
 import { useAppInfo } from "~/core/config/UseAppInfo";
 
 export function useAboutPage(serverVersion: string): AboutViewProps {
   const { appName } = useAppInfo();
-  const navigate = useNavigate();
+  const router = useRouter();
 
   function handleOnBack(): void {
-    navigate(-1);
+    router.history.back();
   }
 
   return { appVersion: import.meta.env.VITE_APP_VERSION, serverVersion, appName, onBack: handleOnBack };
diff --git a/apps/web/src/pages/about/modal/UseAboutModalPage.ts b/apps/web/src/pages/about/modal/UseAboutModalPage.ts
@@ -1,13 +1,13 @@
-import { useNavigate } from "react-router-dom";
+import { useRouter } from "@tanstack/react-router";
 import { useAboutPage } from "../UseAboutPage";
 import type { AboutModalProps } from "~/components/feedback/about-modal/AboutModal";
 
 export function useAboutModalPage(serverVersion: string): AboutModalProps {
-  const navigate = useNavigate();
+  const router = useRouter();
   const aboutProps = useAboutPage(serverVersion);
 
   function handleOnClose(): void {
-    navigate(-1);
+    router.history.back();
   }
 
   return {
diff --git a/apps/web/src/pages/forgot-password/UseForgotPasswordPage.ts b/apps/web/src/pages/forgot-password/UseForgotPasswordPage.ts
@@ -1,7 +1,7 @@
 import { addToast } from "@heroui/react";
 import { usePostForgotPasswordMutate } from "@package/api";
 import { useIntl } from "react-intl";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "@tanstack/react-router";
 import type { FormForgotPassword } from "~/components/forms/forgot-password/ForgotPasswordForm";
 import type { ForgotPasswordViewProps } from "~/components/views/forgot-password/ForgotPasswordView";
 import { useAppInfo } from "~/core/config/UseAppInfo";
@@ -14,15 +14,15 @@ export function useForgotPasswordPage(): ForgotPasswordViewProps {
 
   function handleOnBack(): void {
     console.log("handleBack");
-    navigate("/login");
+    navigate({ to: "/login" });
   }
 
   async function handleOnSubmit(data: FormForgotPassword): Promise<void> {
     const { email } = data;
 
     try {
       await submit(email);
-      navigate("/");
+      navigate({ to: "/" });
     } catch {
       addToast({
         title: intl.formatMessage({
diff --git a/apps/web/src/pages/login/UseLoginPage.ts b/apps/web/src/pages/login/UseLoginPage.ts
@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { useIntl } from "react-intl";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "@tanstack/react-router";
 import type { LoginViewProps } from "../../components/views/login/LoginView";
 import type { FormLogin } from "~/components/forms/login/LoginForm";
 import { useAuth } from "~/core/auth/UseAuth";
@@ -22,7 +22,7 @@ export function useLoginPage(): LoginViewProps {
         password: data.password,
         rememberMe: data.remember,
       });
-      navigate("/");
+      navigate({ to: "/" });
     } catch {
       setLoginError(
         intl.formatMessage({
@@ -35,15 +35,15 @@ export function useLoginPage(): LoginViewProps {
   }
 
   function handleOnAbout(): void {
-    navigate("/about");
+    navigate({ to: "/about" });
   }
 
   function handleForgotPassword(): void {
-    navigate("/forgot-password", { state: { something: "Incoming!" } });
+    navigate({ to: "/forgot-password" });
   }
 
   function handleSignUp(): void {
-    navigate("/sign-up");
+    navigate({ to: "/sign-up" });
   }
 
   return {
diff --git a/apps/web/src/pages/not-found/UseNotFoundPage.ts b/apps/web/src/pages/not-found/UseNotFoundPage.ts
@@ -1,12 +1,12 @@
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "@tanstack/react-router";
 
 export function useNotFoundPage(): {
   handleClick: () => void;
 } {
   const navigate = useNavigate();
 
   function handleClick(): void {
-    navigate("/login");
+    navigate({ to: "/login" });
   }
 
   return {
diff --git a/apps/web/src/pages/sign-up/UseSignUpPage.ts b/apps/web/src/pages/sign-up/UseSignUpPage.ts
@@ -1,7 +1,7 @@
 import { addToast } from "@heroui/react";
 import { usePostSelfRegister } from "@package/api";
 import { useIntl } from "react-intl";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "@tanstack/react-router";
 import type { FormSignUp } from "~/components/forms/sign-up/SignUpForm";
 import type { SignUpViewProps } from "~/components/views/sign-up/SignUpView";
 import { useAppInfo } from "~/core/config/UseAppInfo";
@@ -13,13 +13,13 @@ export function useSignUpPage(): SignUpViewProps {
   const { isPending, mutateAsync: submit } = usePostSelfRegister();
 
   function handleOnBack(): void {
-    navigate("/login");
+    navigate({ to: "/login" });
   }
 
   async function handleOnSubmit(data: FormSignUp): Promise<void> {
     try {
       await submit(data);
-      navigate("/");
+      navigate({ to: "/" });
     } catch {
       addToast({
         title: intl.formatMessage({
diff --git a/apps/web/src/routes/$.tsx b/apps/web/src/routes/$.tsx
@@ -0,0 +1,11 @@
+import type { ReactElement } from "react";
+import { createFileRoute } from "@tanstack/react-router";
+import { NotFoundPage } from "~/pages/not-found/NotFoundPage";
+
+export const Route = createFileRoute("/$")({
+  component: NotFoundPageRoute,
+});
+
+function NotFoundPageRoute(): ReactElement {
+  return <NotFoundPage />;
+}
diff --git a/apps/web/src/routes/__root.tsx b/apps/web/src/routes/__root.tsx
@@ -0,0 +1,15 @@
+import type { ReactElement } from "react";
+import { Outlet, createRootRoute } from "@tanstack/react-router";
+import { RouteProviders } from "~/core/routes/RouteProviders";
+
+export const Route = createRootRoute({
+  component: RootComponent,
+});
+
+function RootComponent(): ReactElement {
+  return (
+    <RouteProviders>
+      <Outlet />
+    </RouteProviders>
+  );
+}
diff --git a/apps/web/src/routes/_authenticated.tsx b/apps/web/src/routes/_authenticated.tsx
@@ -0,0 +1,28 @@
+import type { ReactElement } from "react";
+import { Suspense } from "react";
+import { Outlet, createFileRoute, redirect } from "@tanstack/react-router";
+import { RouteLoading } from "~/core/routes/logic/RouteLoading";
+
+export const Route = createFileRoute("/_authenticated")({
+  beforeLoad: ({ context }) => {
+    const { authStatus } = context;
+    if (authStatus === "idle") {
+      // Still loading, let it render the loading state
+      return;
+    }
+    if (authStatus === "authenticating") {
+      throw redirect({
+        to: "/login",
+      });
+    }
+  },
+  component: AuthenticatedLayout,
+});
+
+function AuthenticatedLayout(): ReactElement {
+  return (
+    <Suspense fallback={<RouteLoading />}>
+      <Outlet />
+    </Suspense>
+  );
+}
diff --git a/apps/web/src/routes/_authenticated/index.tsx b/apps/web/src/routes/_authenticated/index.tsx
@@ -0,0 +1,15 @@
+import type { ReactElement } from "react";
+import { createFileRoute } from "@tanstack/react-router";
+import { HomePage, type HomePageProps } from "~/pages/home/HomePage";
+import { loader } from "~/pages/home/HomeLoader";
+
+export const Route = createFileRoute("/_authenticated/")({
+  loader: (): HomePageProps => loader(),
+  component: HomePageRoute,
+  errorComponent: ({ error }) => <div>Error loading home page: {error.message}</div>,
+});
+
+function HomePageRoute(): ReactElement {
+  const data = Route.useLoaderData();
+  return <HomePage {...data} />;
+}
diff --git a/apps/web/src/routes/_authenticated/version.tsx b/apps/web/src/routes/_authenticated/version.tsx
@@ -0,0 +1,17 @@
+import type { ReactElement } from "react";
+import { createFileRoute } from "@tanstack/react-router";
+import { loader } from "~/pages/about/AboutLoader";
+import { AboutModalPage } from "~/pages/about/modal/AboutModalPage";
+
+export const Route = createFileRoute("/_authenticated/version")({
+  loader: async ({ context }) => {
+    const { queryClient } = context;
+    return loader(queryClient);
+  },
+  component: VersionModalRoute,
+});
+
+function VersionModalRoute(): ReactElement {
+  const data = Route.useLoaderData();
+  return <AboutModalPage {...data} />;
+}
diff --git a/apps/web/src/routes/_public.tsx b/apps/web/src/routes/_public.tsx
@@ -0,0 +1,24 @@
+import type { ReactElement } from "react";
+import { Suspense } from "react";
+import { Outlet, createFileRoute, redirect } from "@tanstack/react-router";
+import { RouteLoading } from "~/core/routes/logic/RouteLoading";
+
+export const Route = createFileRoute("/_public")({
+  beforeLoad: ({ context }) => {
+    const { authStatus } = context;
+    if (authStatus === "authenticated") {
+      throw redirect({
+        to: "/",
+      });
+    }
+  },
+  component: PublicLayout,
+});
+
+function PublicLayout(): ReactElement {
+  return (
+    <Suspense fallback={<RouteLoading />}>
+      <Outlet />
+    </Suspense>
+  );
+}
diff --git a/apps/web/src/routes/_public/about.tsx b/apps/web/src/routes/_public/about.tsx
diff --git a/apps/web/src/routes/_public/forgot-password.tsx b/apps/web/src/routes/_public/forgot-password.tsx
diff --git a/apps/web/src/routes/_public/login.tsx b/apps/web/src/routes/_public/login.tsx
diff --git a/apps/web/src/routes/_public/sign-up.tsx b/apps/web/src/routes/_public/sign-up.tsx
diff --git a/apps/web/vite.config.ts b/apps/web/vite.config.ts
diff --git a/package.json b/package.json
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
