refactor: migrate from HashRouter to createHashRouter

test/integration/notifications&auth/notifications-activation.test.tsx

@@ -68,7 +68,7 @@ describe('Notifications Activation', () => {
   });
 
   afterEach(() => {
-    window.history.pushState({}, '', '/'); // return to homescreen
+    window.location.hash = '#/'; // return to homescreen
   });
 
   const clickElement = async (testId: string) => {

test/integration/notifications&auth/notifications-list.test.tsx

@@ -63,7 +63,7 @@ describe('Notifications List', () => {
   });
 
   afterEach(() => {
-    window.history.pushState({}, '', '/'); // return to homescreen
+    window.location.hash = '#/'; // return to homescreen
   });
 
   it('should show the correct number of unread notifications on the badge', async () => {

test/integration/notifications&auth/notifications-toggle.test.tsx

@@ -84,7 +84,7 @@ describe('Notifications Toggle', () => {
   });
 
   afterEach(() => {
-    window.history.pushState({}, '', '/'); // return to homescreen
+    window.location.hash = '#/'; // return to homescreen
   });
 
   it('disabling notifications from settings', async () => {

ui/pages/index.js

@@ -1,7 +1,13 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { Provider } from 'react-redux';
-import { HashRouter } from 'react-router-dom';
+import {
+  HashRouter,
+  Outlet,
+  RouterProvider,
+  createHashRouter,
+  useRouteError,
+} from 'react-router-dom';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { captureException } from '../../shared/lib/sentry';
 import { I18nProvider, LegacyI18nProvider } from '../contexts/i18n';
@@ -18,7 +24,67 @@ import { queryClient } from '../contexts/query-client';
 import { HardwareWalletErrorProvider } from '../contexts/hardware-wallets';
 import ErrorPage from './error-page/error-page.component';
 
-import Routes from './routes';
+import Routes, { routeConfig } from './routes';
+
+/**
+ * Error boundary for the data router. When a route component throws,
+ * createHashRouter catches it internally instead of letting it reach the
+ * React class component boundary. This renders the same ErrorPage used by
+ * the class boundary, and reports to Sentry.
+ */
+function RouteErrorBoundary() {
+  const error = useRouteError();
+
+  captureException(error);
+
+  return <ErrorPage error={error} />;
+}
+
+/**
+ * Root layout route element containing all context providers.
+ * Renders <Outlet /> which is replaced by the matched child route (<Routes />).
+ */
+function AppProviders() {
+  return (
+    <MetaMetricsProvider>
+      <LegacyMetaMetricsProvider>
+        <I18nProvider>
+          <LegacyI18nProvider>
+            <QueryClientProvider client={queryClient}>
+              <AssetPollingProvider>
+                <MetamaskIdentityProvider>
+                  <MetamaskNotificationsProvider>
+                    <HardwareWalletErrorProvider>
+                      <ShieldSubscriptionProvider>
+                        <RiveWasmProvider>
+                          <Outlet />
+                        </RiveWasmProvider>
+                      </ShieldSubscriptionProvider>
+                    </HardwareWalletErrorProvider>
+                  </MetamaskNotificationsProvider>
+                </MetamaskIdentityProvider>
+              </AssetPollingProvider>
+            </QueryClientProvider>
+          </LegacyI18nProvider>
+        </I18nProvider>
+      </LegacyMetaMetricsProvider>
+    </MetaMetricsProvider>
+  );
+}
+
+const router = createHashRouter([
+  {
+    element: <AppProviders />,
+    errorElement: <RouteErrorBoundary />,
+    children: [
+      {
+        element: <Routes />,
+        errorElement: <RouteErrorBoundary />,
+        children: routeConfig,
+      },
+    ],
+  },
+]);
 
 class Index extends PureComponent {
   state = {};
@@ -53,31 +119,7 @@ class Index extends PureComponent {
 
     return (
       <Provider store={store}>
-        <HashRouter>
-          <MetaMetricsProvider>
-            <LegacyMetaMetricsProvider>
-              <I18nProvider>
-                <LegacyI18nProvider>
-                  <QueryClientProvider client={queryClient}>
-                    <AssetPollingProvider>
-                      <MetamaskIdentityProvider>
-                        <MetamaskNotificationsProvider>
-                          <HardwareWalletErrorProvider>
-                            <ShieldSubscriptionProvider>
-                              <RiveWasmProvider>
-                                <Routes />
-                              </RiveWasmProvider>
-                            </ShieldSubscriptionProvider>
-                          </HardwareWalletErrorProvider>
-                        </MetamaskNotificationsProvider>
-                      </MetamaskIdentityProvider>
-                    </AssetPollingProvider>
-                  </QueryClientProvider>
-                </LegacyI18nProvider>
-              </I18nProvider>
-            </LegacyMetaMetricsProvider>
-          </MetaMetricsProvider>
-        </HashRouter>
+        <RouterProvider router={router} />
       </Provider>
     );
   }

ui/pages/routes/index.js

@@ -1 +1,2 @@
 export { default } from './routes.component';
+export { routeConfig } from './routes.component';