Merge pull request #10818 from DestinyItemManager/react-router

Upgrade to React Router v7

package.json

@@ -231,8 +231,7 @@
     "react-dom": "^18.3.1",
     "react-dropzone": "^14.3.5",
     "react-redux": "^9.1.2",
-    "react-router": "^6.28.0",
-    "react-router-dom": "^6.28.0",
+    "react-router": "^7.0.1",
     "react-textarea-autosize": "^8.5.5",
     "redux": "^5.0.1",
     "redux-thunk": "^3.1.0",

src/app/App.tsx

@@ -136,8 +136,12 @@ export default function App() {
                       </ErrorBoundary>
                     }
                   />
-                  <Route path="armory/*" element={<DefaultAccount />} />
-                  <Route path=":membershipId/:destinyVersion/*" element={<Destiny />} />
+                  <Route path="armory">
+                    <Route path="*" element={<DefaultAccount />} />
+                  </Route>
+                  <Route path=":membershipId/:destinyVersion">
+                    <Route path="*" element={<Destiny />} />
+                  </Route>
                   <Route path="*" element={<DefaultAccount />} />
                 </>
               )}

src/app/Root.tsx

@@ -9,7 +9,7 @@ import {
 } from 'react-dnd-multi-backend';
 import { TouchBackend } from 'react-dnd-touch-backend';
 import { Provider } from 'react-redux';
-import { BrowserRouter as Router } from 'react-router-dom';
+import { BrowserRouter as Router } from 'react-router';
 import App from './App';
 import store from './store/store';
 import { isNativeDragAndDropSupported } from './utils/browsers';
@@ -37,7 +37,7 @@ function Root() {
           ],
   };
   return (
-    <Router future={{ v7_startTransition: true }} basename={$PUBLIC_PATH}>
+    <Router basename={$PUBLIC_PATH}>
       <Provider store={store}>
         <LocationSwitcher />
         <DndProvider options={options}>

src/app/accounts/MenuAccounts.tsx

@@ -4,7 +4,7 @@ import { useThunkDispatch } from 'app/store/thunk-dispatch';
 import { chainComparator, compareBy, reverseComparator } from 'app/utils/comparators';
 import React from 'react';
 import { useSelector } from 'react-redux';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import { AppIcon, signOutIcon } from '../shell/icons';
 import Account from './Account';
 import styles from './MenuAccounts.m.scss';

src/app/accounts/SelectAccount.tsx

@@ -4,7 +4,7 @@ import { AppIcon, signOutIcon } from 'app/shell/icons';
 import { useThunkDispatch } from 'app/store/thunk-dispatch';
 import { chainComparator, compareBy, reverseComparator } from 'app/utils/comparators';
 import { useSelector } from 'react-redux';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import Account from './Account';
 import styles from './SelectAccount.m.scss';
 import { logOut } from './platforms';

src/app/compare/Compare.tsx

@@ -26,7 +26,7 @@ import { StatHashes } from 'data/d2/generated-enums';
 import { maxBy } from 'es-toolkit';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import Sheet from '../dim-ui/Sheet';
 import { DimItem, DimSocket } from '../inventory/item-types';
 import { chainComparator, Comparator, compareBy, reverseComparator } from '../utils/comparators';

src/app/loadout/Loadouts.tsx

@@ -33,7 +33,7 @@ import { usePageTitle } from 'app/utils/hooks';
 import { DestinySeasonDefinition } from 'bungie-api-ts/destiny2';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import styles from './Loadouts.m.scss';
 import LoadoutRow from './LoadoutsRow';
 import { updateLoadoutStore } from './actions';

src/app/loadout/loadout-menu/LoadoutPopup.tsx

@@ -62,7 +62,7 @@ import clsx from 'clsx';
 import consumablesIcon from 'destiny-icons/general/consumables.svg';
 import React, { useState } from 'react';
 import { useSelector } from 'react-redux';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import { InGameLoadoutIconWithIndex } from '../ingame/InGameLoadoutIcon';
 import { applyInGameLoadout } from '../ingame/ingame-loadout-apply';
 import { inGameLoadoutsForCharacterSelector } from '../ingame/selectors';

src/app/loadout/loadout-ui/OptimizerButton.tsx

@@ -5,7 +5,7 @@ import { Loadout, ResolvedLoadoutItem } from 'app/loadout/loadout-types';
 import { AppIcon, faCalculator } from 'app/shell/icons';
 import { count } from 'app/utils/collections';
 import { useSelector } from 'react-redux';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 
 /**
  * Link to open a loadout in the Optimizer.

src/app/login/Login.tsx

@@ -6,7 +6,7 @@ import { exportBackupData, exportLocalData } from 'app/storage/export-data';
 import { useThunkDispatch } from 'app/store/thunk-dispatch';
 import { isAppStoreVersion } from 'app/utils/browsers';
 import { useEffect, useMemo, useState } from 'react';
-import { Link, useLocation } from 'react-router-dom';
+import { Link, useLocation } from 'react-router';
 import { oauthClientId } from '../bungie-api/bungie-api-utils';
 import styles from './Login.m.scss';
 

src/app/records/Records.tsx

@@ -12,7 +12,7 @@ import { querySelector } from 'app/shell/selectors';
 import { compact, filterMap } from 'app/utils/collections';
 import { usePageTitle } from 'app/utils/hooks';
 import { useSelector } from 'react-redux';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router';
 import { DestinyAccount } from '../accounts/destiny-account';
 import ErrorBoundary from '../dim-ui/ErrorBoundary';
 import {

src/app/shell/About.tsx

@@ -7,7 +7,7 @@ import { usePageTitle } from 'app/utils/hooks';
 import { systemInfo } from 'app/utils/system-info';
 import logo from 'images/dimlogo.svg';
 import { useEffect } from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import ExternalLink from '../dim-ui/ExternalLink';
 import styles from './About.m.scss';
 import { AppIcon, faDiscord, faGithub, faTshirt, heartIcon, helpIcon, mastodonIcon } from './icons';

src/app/shell/GATracker.tsx

@@ -1,6 +1,6 @@
 import { gaPageView } from 'app/google';
 import { useEffect } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 
 /**
  * Record page views to Google Analytics.

src/app/shell/Header.tsx

@@ -20,8 +20,7 @@ import { AnimatePresence, Spring, Variants, motion } from 'framer-motion';
 import logo from 'images/logo-type-right-light.svg';
 import React, { Suspense, lazy, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
-import { useLocation } from 'react-router';
-import { Link, NavLink } from 'react-router-dom';
+import { Link, NavLink, useLocation } from 'react-router';
 import { useSubscription } from 'use-subscription';
 import ClickOutside from '../dim-ui/ClickOutside';
 import ExternalLink from '../dim-ui/ExternalLink';

src/app/shell/LocationSwitcher.tsx

@@ -2,7 +2,7 @@ import { resetRouterLocation } from 'app/shell/actions';
 import { routerLocationSelector } from 'app/shell/selectors';
 import { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 
 /**
  * Component used to auto-navigate to a selected route selected through

src/app/shell/Privacy.tsx

@@ -1,6 +1,6 @@
 import ExternalLink from 'app/dim-ui/ExternalLink';
 import StaticPage from 'app/dim-ui/StaticPage';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import styles from './Privacy.m.scss';
 
 export default function Privacy() {

src/app/shell/ScrollToTop.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 
 /**
  * https://reacttraining.com/react-router/web/guides/scroll-restoration

src/app/shell/SneakyUpdates.tsx

@@ -1,6 +1,6 @@
 import { dimNeedsUpdate$, reloadDIM } from 'app/register-service-worker';
 import { useEffect, useRef } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 
 /**
  * "Sneaky Updates" - reload on navigation if DIM needs an update.

src/app/storage/DimApiSettings.tsx

@@ -18,7 +18,7 @@ import { useThunkDispatch } from 'app/store/thunk-dispatch';
 import { errorMessage } from 'app/utils/errors';
 import React, { useState } from 'react';
 import { useSelector } from 'react-redux';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import styles from './DimApiSettings.m.scss';
 import ImportExport from './ImportExport';
 import LocalStorageInfo from './LocalStorageInfo';

src/app/whats-new/WhatsNewLink.tsx

@@ -2,7 +2,7 @@ import { t } from 'app/i18next-t';
 import { bungieAlertsSelector } from 'app/shell/selectors';
 import clsx from 'clsx';
 import { useSelector } from 'react-redux';
-import { NavLink } from 'react-router-dom';
+import { NavLink } from 'react-router';
 import { useSubscription } from 'use-subscription';
 import { dimNeedsUpdate$, reloadDIM } from '../register-service-worker';
 import { AppIcon, updateIcon } from '../shell/icons';