Dependency fix: install router from react-router, not react-router-dom

Author: NatSquared

met-web/package-lock.json

@@ -99,7 +99,7 @@
     "react-player": "^2.16.1",
     "react-redux": "^9.2.0",
     "react-refresh": "^0.18.0",
-    "react-router-dom": "^7.12.0",
+    "react-router": "^7.13.0",
     "react-svg": "^16.3.0",
     "recharts": "^3.1.2",
     "redux": "^5.0.1",

met-web/package.json

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useContext } from 'react';
 import '@bcgov/design-tokens/css-prefixed/variables.css'; // Will be available to use in all component
 import './App.scss';
-import { RouterProvider, createBrowserRouter, createRoutesFromElements } from 'react-router-dom';
+import { RouterProvider, createBrowserRouter, createRoutesFromElements } from 'react-router';
 import { useAppSelector, useAppDispatch } from './hooks';
 import UnauthenticatedRoutes from './routes/UnauthenticatedRoutes';
 import AuthenticatedRoutes from './routes/AuthenticatedRoutes';

met-web/src/App.tsx

@@ -1,6 +1,6 @@
 import React, { createContext, JSX, useEffect, useState } from 'react';
 import { TAB_ONE } from './constants';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router';
 import { Engagement } from 'models/engagement';
 import { getEngagement } from 'services/engagementService';
 import { EngagementStatus } from 'constants/engagementStatus';

met-web/src/components/FormCAC/FormContext.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 
 const FormioListener = () => {
     const { pathname } = useLocation();

met-web/src/components/FormioListener/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import '@bcgov/design-tokens/css-prefixed/variables.css'; // Variables will be within scope within AuthenticatedLayout and its children
-import { Outlet } from 'react-router-dom';
+import { Outlet } from 'react-router';
 import { Box } from '@mui/material';
 import InternalHeader from '../layout/Header/InternalHeader';
 import { Notification } from 'components/common/notification';

met-web/src/components/appLayouts/AuthenticatedLayout.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import '@bcgov/design-tokens/css-prefixed/variables.css'; // Variables will be within scope within PublicLayout and its children
-import { Outlet } from 'react-router-dom';
+import { Outlet } from 'react-router';
 import PublicHeader from '../layout/Header/PublicHeader';
 import { Notification } from 'components/common/notification';
 import PageViewTracker from 'routes/PageViewTracker';

met-web/src/components/appLayouts/PublicLayout.tsx

@@ -15,7 +15,7 @@ import {
 } from '@mui/material';
 import { getSubmission, reviewComments } from 'services/submissionService';
 import { useAppDispatch, useAppTranslation, useAppSelector } from 'hooks';
-import { useParams, useNavigate } from 'react-router-dom';
+import { useParams, useNavigate } from 'react-router';
 import { openNotification } from 'services/notificationService/notificationSlice';
 import {
     MetLabel,

met-web/src/components/comments/admin/review/CommentReview.tsx

@@ -4,7 +4,7 @@ import { CommentStatus } from 'constants/commentStatus';
 import { useAppDispatch } from 'hooks';
 import { Survey, createDefaultSurvey } from 'models/survey';
 import { SurveySubmission } from 'models/surveySubmission';
-import { useParams, useLocation } from 'react-router-dom';
+import { useParams, useLocation } from 'react-router';
 import { openNotification } from 'services/notificationService/notificationSlice';
 import { getSubmissionPage } from 'services/submissionService';
 import { getSurvey } from 'services/surveyService';

met-web/src/components/comments/admin/reviewListing/CommentListingContext.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useContext } from 'react';
 import MetTable from 'components/common/Table';
 import Grid from '@mui/material/Grid';
-import { Link, useLocation } from 'react-router-dom';
+import { Link, useLocation } from 'react-router';
 import { MetPageGridContainer, PrimaryButtonOld, MetHeader1Old, SecondaryButtonOld } from 'components/common';
 import { HeadCell, PaginationOptions } from 'components/common/Table/types';
 import { formatDate } from 'components/common/dateHelper';