refactor(settings): Use react-router instead of reach/router

packages/fxa-admin-panel/package.json

@@ -47,7 +47,7 @@
     "helmet": "^8.0.0",
     "mozlog": "^3.0.2",
     "on-headers": "^1.1.0",
-    "react-router-dom": "^6.26.0",
+    "react-router": "7.18.0",
     "react-scripts": "^5.0.1",
     "serve-static": "^1.16.0"
   },

packages/fxa-admin-panel/src/App.tsx

@@ -5,7 +5,7 @@
 import { useState } from 'react';
 import { UserContext } from './hooks/UserContext';
 import { GuardContext } from './hooks/GuardContext';
-import { Route, Routes, BrowserRouter, Navigate } from 'react-router-dom';
+import { Route, Routes, BrowserRouter, Navigate } from 'react-router';
 import AppLayout from './components/AppLayout';
 import AccountSearch from './components/PageAccountSearch';
 import { PagePermissions } from './components/PagePermissions';

packages/fxa-admin-panel/src/components/Nav/index.tsx

@@ -3,7 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import React from 'react';
-import { NavLink } from 'react-router-dom';
+import { NavLink } from 'react-router';
 import accountIcon from '../../images/icon-account.svg';
 import keyIcon from '../../images/icon-key.svg';
 import shieldIcon from '../../images/icon-shield.svg';

packages/fxa-admin-panel/src/components/PageRelyingParties/index.test.tsx

@@ -4,7 +4,7 @@
 
 import React from 'react';
 import { act, fireEvent, screen } from '@testing-library/react';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter } from 'react-router';
 import PageRelyingParties from '.';
 import { MOCK_RP_ALL_FIELDS, MOCK_RP_FALSY_FIELDS } from './mocks';
 import { IClientConfig } from '../../../interfaces';

packages/fxa-admin-panel/src/components/PageRelyingParties/index.tsx

@@ -3,7 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import React, { useState, useEffect, useCallback } from 'react';
-import { NavLink } from 'react-router-dom';
+import { NavLink } from 'react-router';
 import LinkExternal from 'fxa-react/components/LinkExternal';
 import {
   RelyingPartyCreatedDto,

packages/fxa-admin-panel/src/components/PageWafTokens/index.test.tsx

@@ -4,7 +4,7 @@
 
 import React from 'react';
 import { screen, waitFor } from '@testing-library/react';
-import { MemoryRouter, Route, Routes, useLocation } from 'react-router-dom';
+import { MemoryRouter, Route, Routes, useLocation } from 'react-router';
 import { PageWafTokens } from '.';
 import { IClientConfig } from '../../../interfaces';
 import { GuardEnv, AdminPanelGroup, AdminPanelGuard } from '@fxa/shared/guards';

packages/fxa-admin-panel/src/components/PageWafTokens/index.tsx

@@ -3,7 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router';
 import { adminApi } from '../../lib/api';
 import { AdminPanelFeature } from '@fxa/shared/guards';
 import { Guard } from '../Guard';

packages/fxa-admin-panel/src/setupTests.js

@@ -3,3 +3,9 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import '@testing-library/jest-dom/extend-expect';
+import { TextEncoder, TextDecoder } from 'util';
+
+// react-router v7 requires TextEncoder/TextDecoder in its internal modules.
+// jsdom does not provide these by default.
+global.TextEncoder = TextEncoder;
+global.TextDecoder = TextDecoder;

packages/fxa-react/lib/storybooks.tsx

@@ -5,11 +5,7 @@
 import React from 'react';
 import { Decorator } from '@storybook/react';
 import AppLocalizationProvider from './AppLocalizationProvider';
-import {
-  createHistory,
-  createMemorySource,
-  LocationProvider,
-} from '@reach/router';
+import { MemoryRouter } from 'react-router';
 
 // This decorator makes the localization bundles available in the stories.
 // If a localized string is available, that will be rendered in the storybook,
@@ -21,20 +17,8 @@ export const withLocalization: Decorator = (Story) => (
 );
 
 export const withLocation: (location?: string) => Decorator =
-  (location) => (Story) => {
-    if (location === undefined) {
-      return (
-        <LocationProvider>
-          <Story />
-        </LocationProvider>
-      );
-    }
-    const source = createMemorySource(location);
-    const history = createHistory(source);
-
-    return (
-      <LocationProvider history={history}>
-        <Story />
-      </LocationProvider>
-    );
-  };
+  (location) => (Story) => (
+    <MemoryRouter initialEntries={location ? [location] : ['/']}>
+      <Story />
+    </MemoryRouter>
+  );

packages/fxa-react/package.json

@@ -37,6 +37,9 @@
     "test-unit": "JEST_JUNIT_OUTPUT_FILE=../../artifacts/tests/$npm_package_name/fxa-react-jest-unit-results.xml jest --coverage --runInBand --logHeapUsage --env=jest-environment-jsdom -t '^(?!.*?#integration).*' --ci --reporters=default --reporters=jest-junit",
     "watch-ftl": "yarn l10n-watch"
   },
+  "peerDependencies": {
+    "react-router": "^7.18.0"
+  },
   "dependencies": {
     "@fluent/bundle": "^0.18.0",
     "@fluent/langneg": "^0.7.0",

packages/fxa-settings/package.json

@@ -132,7 +132,6 @@
     "@emotion/styled": "^11.13.0",
     "@material-ui/core": "v5.0.0-alpha.24",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
-    "@reach/router": "^1.3.4",
     "@react-pdf/renderer": "3.2.1",
     "@svgr/webpack": "^8.1.0",
     "@types/material-ui": "^0.21.8",
@@ -178,6 +177,7 @@
     "react-hook-form": "^6.15.8",
     "react-markdown": "^8.0.5",
     "react-refresh": "^0.16.0",
+    "react-router": "7.18.0",
     "react-webcam": "^7.2.0",
     "rehype-raw": "^6.1.1",
     "resolve": "^1.22.8",
@@ -209,8 +209,6 @@
     "@types/jest": "26.0.23",
     "@types/node": "^22.13.5",
     "@types/prop-types": "^15",
-    "@types/reach__router": "^1.3.11",
-    "@types/react-router": "^5.1.19",
     "@types/ua-parser-js": "^0.7.36",
     "@types/uuid": "^10",
     "@types/webpack": "5.28.5",

packages/fxa-settings/src/components/AlternativeAuthOptions/mocks.tsx

@@ -2,17 +2,17 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-import { LocationProvider } from '@reach/router';
+import { MemoryRouter } from 'react-router';
 import AlternativeAuthOptions, { AlternativeAuthOptionsProps } from '.';
 import Banner from '../Banner';
 import { AppContext } from '../../models';
 import { mockAppContext } from '../../models/mocks';
 
 export const Subject = (props: AlternativeAuthOptionsProps) => (
   <AppContext.Provider value={mockAppContext()}>
-    <LocationProvider>
+    <MemoryRouter>
       <AlternativeAuthOptions {...props} />
-    </LocationProvider>
+    </MemoryRouter>
   </AppContext.Provider>
 );