refactor: switch to declarative mode instead of data mode in react router

frontend/src/components/layout/layout.tsx

@@ -1,7 +1,8 @@
 import { useAppContext } from "@/context/app-context";
 import { LanguageSelector } from "../language/language";
+import { Outlet } from "react-router";
 
-export const Layout = ({ children }: { children: React.ReactNode }) => {
+export const Layout = () => {
   const { backgroundImage } = useAppContext();
 
   return (
@@ -14,7 +15,7 @@ export const Layout = ({ children }: { children: React.ReactNode }) => {
       }}
     >
       <LanguageSelector />
-      {children}
+      <Outlet />
     </div>
   );
 };

frontend/src/main.tsx

@@ -2,7 +2,7 @@ import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import "./index.css";
 import { Layout } from "./components/layout/layout.tsx";
-import { createBrowserRouter, RouterProvider } from "react-router";
+import { BrowserRouter, Route, Routes } from "react-router";
 import { LoginPage } from "./pages/login-page.tsx";
 import { App } from "./App.tsx";
 import { ErrorPage } from "./pages/error-page.tsx";
@@ -17,54 +17,6 @@ import { AppContextProvider } from "./context/app-context.tsx";
 import { UserContextProvider } from "./context/user-context.tsx";
 import { Toaster } from "@/components/ui/sonner";
 
-const router = createBrowserRouter([
-  {
-    path: "/",
-    element: <App />,
-    errorElement: <ErrorPage />,
-  },
-  {
-    path: "/login",
-    element: <LoginPage />,
-    errorElement: <ErrorPage />,
-  },
-  {
-    path: "/logout",
-    element: <LogoutPage />,
-    errorElement: <ErrorPage />,
-  },
-  {
-    path: "/continue",
-    element: <ContinuePage />,
-    errorElement: <ErrorPage />,
-  },
-  {
-    path: "/totp",
-    element: <TotpPage />,
-    errorElement: <ErrorPage />,
-  },
-  {
-    path: "/forgot-password",
-    element: <ForgotPasswordPage />,
-    errorElement: <ErrorPage />,
-  },
-  {
-    path: "/unauthorized",
-    element: <UnauthorizedPage />,
-    errorElement: <ErrorPage />,
-  },
-  {
-    path: "/error",
-    element: <ErrorPage />,
-    errorElement: <ErrorPage />,
-  },
-  {
-    path: "*",
-    element: <NotFoundPage />,
-    errorElement: <ErrorPage />,
-  },
-]);
-
 const queryClient = new QueryClient();
 
 createRoot(document.getElementById("root")!).render(
@@ -72,10 +24,25 @@ createRoot(document.getElementById("root")!).render(
     <QueryClientProvider client={queryClient}>
       <AppContextProvider>
         <UserContextProvider>
-          <Layout>
+          <BrowserRouter>
-            <RouterProvider router={router} />
+            <Routes>
-            <Toaster />
+              <Route element={<Layout />} errorElement={<ErrorPage />}>
-          </Layout>
+                <Route path="/" element={<App />} />
+                <Route path="/login" element={<LoginPage />} />
+                <Route path="/logout" element={<LogoutPage />} />
+                <Route path="/continue" element={<ContinuePage />} />
+                <Route path="/totp" element={<TotpPage />} />
+                <Route
+                  path="/forgot-password"
+                  element={<ForgotPasswordPage />}
+                />
+                <Route path="/unauthorized" element={<UnauthorizedPage />} />
+                <Route path="/error" element={<ErrorPage />} />
+                <Route path="*" element={<NotFoundPage />} />
+              </Route>
+            </Routes>
+          </BrowserRouter>
+          <Toaster />
         </UserContextProvider>
       </AppContextProvider>
     </QueryClientProvider>