Switch to @tanstack/react-router

index.html

@@ -75,6 +75,6 @@
         />
       </div>
     </div>
-    <script type="module" src="/src/index.tsx"></script>
+    <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>

package.json

@@ -76,6 +76,7 @@
     "@radix-ui/react-tabs": "^1.1.1",
     "@radix-ui/react-toast": "^1.2.5",
     "@radix-ui/react-tooltip": "^1.1.6",
+    "@tanstack/react-router": "^1.95.5",
     "@sentry/browser": "^8.51.0",
     "@tanstack/react-query": "^5.64.1",
     "@tanstack/react-query-devtools": "^5.64.2",
@@ -137,6 +138,8 @@
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/forms": "^0.5.9",
     "@tailwindcss/typography": "^0.5.15",
+    "@tanstack/router-devtools": "^1.95.5",
+    "@tanstack/router-plugin": "^1.95.5",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@types/dompurify": "^3.0.5",
     "@types/events": "^3.0.3",
@@ -218,4 +221,4 @@
     "node": ">=22.8.0"
   },
   "packageManager": "[email protected]"
-}
+}

src/index.tsx → src/index.old.tsx

@@ -1,5 +1,4 @@
 import careConfig from "@careConfig";
-import * as Sentry from "@sentry/browser";
 import { createRoot } from "react-dom/client";
 import { registerSW } from "virtual:pwa-register";
 
@@ -23,12 +22,5 @@ if ("serviceWorker" in navigator) {
   registerSW({ immediate: false });
 }
 
-if (import.meta.env.PROD) {
-  Sentry.init({
-    environment: import.meta.env.MODE,
-    dsn: "https://[email protected]/5183632",
-  });
-}
-
 const root = createRoot(document.getElementById("root") as HTMLElement);
 root.render(<App />);

src/main.tsx

@@ -0,0 +1,47 @@
+import { RouterProvider, createRouter } from "@tanstack/react-router";
+import { StrictMode } from "react";
+import ReactDOM from "react-dom/client";
+import { registerSW } from "virtual:pwa-register";
+
+import App from "@/App";
+import "@/i18n";
+import "@/style/index.css";
+
+// Import the generated route tree
+import { routeTree } from "./routeTree.gen";
+
+// Create a new router instance
+const router = createRouter({
+  routeTree,
+  defaultNotFoundComponent: () => <App />,
+});
+
+// Register the router instance for type safety
+declare module "@tanstack/react-router" {
+  interface Register {
+    router: typeof router;
+  }
+}
+
+// Extend Window interface to include CARE_API_URL
+declare global {
+  interface Window {
+    CARE_API_URL: string;
+  }
+}
+
+// Set API URL from environment variable
+window.CARE_API_URL = import.meta.env.REACT_CARE_API_URL;
+
+if ("serviceWorker" in navigator) {
+  registerSW({ immediate: false });
+}
+
+const rootElement = document.getElementById("root")!;
+
+const root = ReactDOM.createRoot(rootElement);
+root.render(
+  <StrictMode>
+    <RouterProvider router={router} />
+  </StrictMode>,
+);

src/routeTree.gen.ts

@@ -0,0 +1,83 @@
+/* eslint-disable */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
+// Import Routes
+import { Route as rootRoute } from "./routes/__root";
+import { Route as IndexImport } from "./routes/index";
+
+// Create/Update Routes
+
+const IndexRoute = IndexImport.update({
+  id: "/",
+  path: "/",
+  getParentRoute: () => rootRoute,
+} as any);
+
+// Populate the FileRoutesByPath interface
+
+declare module "@tanstack/react-router" {
+  interface FileRoutesByPath {
+    "/": {
+      id: "/";
+      path: "/";
+      fullPath: "/";
+      preLoaderRoute: typeof IndexImport;
+      parentRoute: typeof rootRoute;
+    };
+  }
+}
+
+// Create and export the route tree
+
+export interface FileRoutesByFullPath {
+  "/": typeof IndexRoute;
+}
+
+export interface FileRoutesByTo {
+  "/": typeof IndexRoute;
+}
+
+export interface FileRoutesById {
+  __root__: typeof rootRoute;
+  "/": typeof IndexRoute;
+}
+
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath;
+  fullPaths: "/";
+  fileRoutesByTo: FileRoutesByTo;
+  to: "/";
+  id: "__root__" | "/";
+  fileRoutesById: FileRoutesById;
+}
+
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute;
+}
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute: IndexRoute,
+};
+
+export const routeTree = rootRoute
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>();
+
+/* ROUTE_MANIFEST_START
+{
+  "routes": {
+    "__root__": {
+      "filePath": "__root.tsx",
+      "children": [
+        "/"
+      ]
+    },
+    "/": {
+      "filePath": "index.tsx"
+    }
+  }
+}
+ROUTE_MANIFEST_END */

src/routes/__root.tsx

@@ -0,0 +1,60 @@
+import {
+  MutationCache,
+  QueryCache,
+  QueryClient,
+  QueryClientProvider,
+} from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import { Outlet, createRootRoute } from "@tanstack/react-router";
+import * as React from "react";
+
+import { Toaster as Sonner } from "@/components/ui/sonner";
+import { Toaster } from "@/components/ui/toaster";
+
+import Integrations from "@/Integrations";
+import PluginEngine from "@/PluginEngine";
+import { PubSubProvider } from "@/Utils/pubsubContext";
+import { handleHttpError } from "@/Utils/request/errorHandler";
+
+export const Route = createRootRoute({
+  component: RootComponent,
+});
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: 2,
+      refetchOnWindowFocus: false,
+    },
+  },
+  queryCache: new QueryCache({
+    onError: handleHttpError,
+  }),
+  mutationCache: new MutationCache({
+    onError: handleHttpError,
+  }),
+});
+
+function RootComponent() {
+  return (
+    <React.Fragment>
+      <QueryClientProvider client={queryClient}>
+        <PubSubProvider>
+          <PluginEngine>
+            <Outlet />
+          </PluginEngine>
+        </PubSubProvider>
+        <ReactQueryDevtools />
+      </QueryClientProvider>
+      <Integrations.Sentry disabled={!import.meta.env.PROD} />
+      <Sonner
+        position="top-right"
+        theme="light"
+        richColors
+        expand
+        toastOptions={{ closeButton: true }}
+      />
+      <Toaster />
+    </React.Fragment>
+  );
+}

src/routes/index.tsx

@@ -0,0 +1,7 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+import { LandingPage } from "@/pages/Landing/LandingPage";
+
+export const Route = createFileRoute("/")({
+  component: () => <LandingPage />,
+});

vite.config.mts

@@ -1,5 +1,6 @@
 import { ValidateEnv } from "@julr/vite-plugin-validate-env";
 import federation from "@originjs/vite-plugin-federation";
+import { TanStackRouterVite } from "@tanstack/router-plugin/vite";
 import react from "@vitejs/plugin-react";
 import DOMPurify from "dompurify";
 import fs from "fs";
@@ -166,6 +167,7 @@ export default defineConfig(({ mode }) => {
       ),
     },
     plugins: [
+      TanStackRouterVite(),
       federation({
         name: "core",
         remotes: getRemotes(env.REACT_ENABLED_APPS),