fix: revert react router upgrade (#2024)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

Author: xiaopeng0202

frontend/package-lock.json

@@ -40,7 +40,7 @@
     "react-beforeunload": "^2.6.0",
     "react-dom": "^18.2.0",
     "react-hash-string": "^1.0.0",
-    "react-router": "^7.5.2",
+    "react-router": "^7.1.1",
     "react-test-renderer": "^18.2.0",
     "react-toastify": "^11.0.0",
     "sass": "^1.77.7",

frontend/package.json

@@ -1,6 +1,6 @@
-import React, { useContext, useEffect } from 'react';
+import React, { useContext, useEffect, useMemo } from 'react';
 import {
-  BrowserRouter
+  createBrowserRouter, RouteObject, RouterProvider
 } from 'react-router';
 import { Amplify } from 'aws-amplify';
 import { ClassPrefix } from '@carbon/react';
@@ -11,11 +11,19 @@ import awsconfig from './aws-exports';
 import prefix from './styles/classPrefix';
 import './styles/custom.scss';
 import 'react-toastify/dist/ReactToastify.css';
+
+import Layout from './layout/PrivateLayout';
+import Landing from './views/Landing';
+import FourOhFour from './views/ErrorViews/FourOhFour';
+import LoginOrgSelection from './views/LoginOrgSelection';
+import ServiceStatus from './views/ServiceStatus';
 import { NavigateProvider } from './contexts/NavigationContext';
 import AuthContext from './contexts/AuthContext';
+import BrowserRoutes from './routes';
+import ROUTES from './routes/constants';
+import ProtectedRoute from './routes/ProtectedRoute';
 import { ThemePreference } from './utils/ThemePreference';
 import CustomQueryProvider from './components/CustomQueryProvider';
-import AppRoutes from './AppRoutes';
 
 Amplify.configure(awsconfig);
 
@@ -25,25 +33,82 @@ Amplify.configure(awsconfig);
  * @returns {JSX.Element} instance of the app ready to use.
  */
 const App: React.FC = () => {
-  const { isCurrentAuthUser } = useContext(AuthContext);
+  const { signed, isCurrentAuthUser, selectedClientRoles } = useContext(AuthContext);
 
   useEffect(() => {
     isCurrentAuthUser(window.location.pathname);
   }, []);
 
+  const roleSelectionRoutes: RouteObject[] = [
+    {
+      path: ROUTES.ALL_ROUTES,
+      element: <LoginOrgSelection />
+    }
+  ];
+
+  const signedRoutes: RouteObject[] = [
+    {
+      path: ROUTES.ROOT,
+      element: <ProtectedRoute />,
+      children: [
+        {
+          element: <Layout />,
+          children: BrowserRoutes
+        }
+      ]
+    },
+    {
+      path: ROUTES.FOUR_OH_FOUR,
+      element: <FourOhFour />
+    },
+    {
+      path: ROUTES.ALL_ROUTES,
+      element: <FourOhFour />
+    }
+  ];
+
+  const notSignedRoutes: RouteObject[] = [
+    {
+      path: ROUTES.ALL_ROUTES,
+      element: <Landing />
+    }
+  ];
+
+  const sharedRoutes: RouteObject[] = [
+    {
+      path: ROUTES.SERVICE_STATUS,
+      element: <ServiceStatus />
+    }
+  ];
+
+  const browserRouter = useMemo(() => {
+    const selectBrowserRoutes = () => {
+      if (!signed) {
+        return notSignedRoutes;
+      }
+      if (selectedClientRoles) {
+        return signedRoutes;
+      }
+      return roleSelectionRoutes;
+    };
+
+    const selectedRoutes = selectBrowserRoutes();
+    selectedRoutes.push(...sharedRoutes);
+
+    return createBrowserRouter(selectedRoutes);
+  }, [signed, selectedClientRoles]);
+
+  const handleRedirectTo403 = () => {
+    browserRouter.navigate('/403');
+  };
+
   return (
     <ClassPrefix prefix={prefix}>
       <ThemePreference>
-        <NavigateProvider onRedirect={() => {
-          // go to 403 page
-          window.location.href = '/403';
-        }}
-        >
+        <NavigateProvider onRedirect={handleRedirectTo403}>
           <CustomQueryProvider>
             <ToastContainer />
-            <BrowserRouter>
-              <AppRoutes />
-            </BrowserRouter>
+            <RouterProvider router={browserRouter} />
             <ReactQueryDevtools initialIsOpen={false} />
           </CustomQueryProvider>
         </NavigateProvider>