install react router 6 in accredited representative portal

package.json

@@ -400,10 +400,13 @@
       "src/applications/check-in",
       "src/applications/vaos",
       "src/applications/claims-status",
-      "src/applications/accredited-representative-portal/accreditation/21a"
+      "src/applications/accredited-representative-portal/accreditation/21a",
+      "src/applications/accredited-representative-portal"
     ],
     "nohoist": [
-      "**/applications/accredited-representative-portal/accreditation/21a/react-router",
+      "**/applications-accredited-representative-portal/accreditation/21a/react-router",
+      "**/applications-accredited-representative-portal/accreditation/21a/history",
+      "**/applications-accredited-representative-portal/react-router-dom",
       "**/applications-check-in/i18next-resources-to-backend",
       "**/applications-check-in/react-i18next",
       "**/applications-claims-status/@department-of-veterans-affairs/component-library",

src/applications/accredited-representative-portal/app-entry.jsx

@@ -2,7 +2,7 @@ import '@department-of-veterans-affairs/platform-polyfills';
 
 import React from 'react';
 import { Provider } from 'react-redux';
-import { BrowserRouter } from 'react-router-dom-v5-compat';
+import { RouterProvider } from 'react-router-dom';
 
 import startReactApp from '@department-of-veterans-affairs/platform-startup/react';
 import { connectFeatureToggle } from 'platform/utilities/feature-toggles';
@@ -12,7 +12,7 @@ import './sass/POARequestsCard.scss';
 import './sass/POARequestDetails.scss';
 
 import manifest from './manifest.json';
-import routes from './routes';
+import router from './routes';
 import createReduxStore from './store';
 import rootReducer from './reducers';
 
@@ -22,6 +22,6 @@ connectFeatureToggle(store.dispatch);
 
 startReactApp(
   <Provider store={store}>
-    <BrowserRouter basename={manifest.rootUrl}>{routes}</BrowserRouter>
+    <RouterProvider router={router} />
   </Provider>,
 );

src/applications/accredited-representative-portal/components/LandingPageWelcome/LandingPageWelcome.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link } from 'react-router-dom-v5-compat';
+import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 
 const LandingPageWelcome = ({ firstName = '', children }) => (

src/applications/accredited-representative-portal/components/POARequestsCard/POARequestsCard.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { Link } from 'react-router-dom-v5-compat';
+import { Link } from 'react-router-dom';
 import {
   formatDateParsedZoneLong,
   timeFromNow,

src/applications/accredited-representative-portal/components/common/Breadcrumbs.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useLocation } from 'react-router-dom-v5-compat';
+import { useLocation } from 'react-router-dom';
 import upperFirst from 'lodash/upperFirst';
 import lowerCase from 'lodash/lowerCase';
 

src/applications/accredited-representative-portal/containers/App.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { Outlet } from 'react-router-dom-v5-compat';
+import { Outlet } from 'react-router';
 
 import { VaLoadingIndicator } from '@department-of-veterans-affairs/component-library/dist/react-bindings';
 import environment from '@department-of-veterans-affairs/platform-utilities/environment';

src/applications/accredited-representative-portal/containers/POARequestDetailsPage.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { useParams, Link } from 'react-router-dom-v5-compat';
+import { useParams, Link } from 'react-router-dom';
 import { formatDateShort } from 'platform/utilities/date/index';
 import usePOARequests from '../hooks/usePOARequests';
 

src/applications/accredited-representative-portal/containers/SignedInLayout.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { Outlet } from 'react-router-dom-v5-compat';
+import { Outlet } from 'react-router-dom';
 
 import { VaLoadingIndicator } from '@department-of-veterans-affairs/component-library/dist/react-bindings';
 

src/applications/accredited-representative-portal/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@department-of-veterans-affairs/applications-accredited-representative-portal",
+  "version": "1.0.0",
+  "private": true,
+  "dependencies": {
+    "react-router-dom": "^6.28.0"
+  }
+}

src/applications/accredited-representative-portal/routes.jsx

@@ -1,21 +1,40 @@
 import React from 'react';
-import { Route, Routes } from 'react-router-dom-v5-compat';
+import { createBrowserRouter } from 'react-router-dom';
+
 import App from './containers/App';
 import LandingPage from './containers/LandingPage';
 import POARequestsPage from './containers/POARequestsPage';
 import SignedInLayoutWrapper from './containers/SignedInLayoutWrapper';
 import POARequestDetailsPage from './containers/POARequestDetailsPage';
 
-const routes = (
-  <Routes>
-    <Route element={<App />}>
-      <Route index element={<LandingPage />} />
-      <Route element={<SignedInLayoutWrapper />}>
-        <Route path="poa-requests" element={<POARequestsPage />} />
-        <Route path="poa-requests/:id" element={<POARequestDetailsPage />} />
-      </Route>
-    </Route>
-  </Routes>
+const router = createBrowserRouter(
+  [
+    {
+      element: <App />,
+      children: [
+        {
+          index: true,
+          element: <LandingPage />,
+        },
+        {
+          element: <SignedInLayoutWrapper />,
+          children: [
+            {
+              path: 'poa-requests',
+              element: <POARequestsPage />,
+            },
+            {
+              path: 'poa-requests/:id',
+              element: <POARequestDetailsPage />,
+            },
+          ],
+        },
+      ],
+    },
+  ],
+  {
+    basename: '/representative',
+  },
 );
 
-export default routes;
+export default router;

src/applications/accredited-representative-portal/tests/unit/helpers/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Provider } from 'react-redux';
-import { MemoryRouter } from 'react-router-dom-v5-compat';
+import { MemoryRouter } from 'react-router-dom';
 import { render } from '@testing-library/react';
 
 import createReduxStore from '../../../store';