Upgrade react router v7

packages/common/package.json

@@ -56,8 +56,6 @@
     "proxy-memoize": "3.0.1",
     "query-string": "8.1.0",
     "react-redux": "8.0.5",
-    "react-router": "^6.22.3",
-    "react-router-dom": "^6.22.3",
     "react-use": "17.4.0",
     "redux": "4.0.5",
     "redux-persist": "6.0.0",

packages/common/src/api/tan-query/comments/index.ts

@@ -3,7 +3,6 @@ export * from './utils'
 export * from './useUserComments'
 export * from './useTrackComments'
 export * from './useComment'
-export * from './useHighlightedComment'
 export * from './useComments'
 export * from './useTrackCommentCount'
 export * from './useCommentReplies'

packages/common/src/utils/route.ts

@@ -1,5 +1,4 @@
 import qs from 'query-string'
-import { matchPath, generatePath } from 'react-router'
 
 import { ID, SearchCategory, SearchFilters } from '~/models'
 
@@ -435,17 +434,6 @@ export const getHash = (str: string) =>
     }, 0)
   ).toString(36)
 
-/** Given a pathname, finds a matching route */
-export const findRoute = (pathname: string) => {
-  for (const route of orderedRoutes) {
-    const match = matchPath(route, pathname)
-    if (match) {
-      return route
-    }
-  }
-  return null
-}
-
 type NullableSearchFilters = {
   [key in keyof SearchFilters]: SearchFilters[key] | null
 }
@@ -462,8 +450,11 @@ export const searchPage = (searchOptions: SearchOptions) => {
     searchParams.genre = convertGenreLabelToValue(searchParams.genre) as Genre
   }
 
+  // Build the search path - category is optional
+  const searchPath = category ? `/search/${category}` : '/search'
+
   return qs.stringifyUrl({
-    url: generatePath(SEARCH_PAGE, { category: category ?? null }),
+    url: searchPath,
     query: searchParams
   })
 }

packages/embed/package.json

@@ -60,7 +60,7 @@
     "react-helmet": "6.1.0",
     "react-merge-refs": "2.1.1",
     "react-perfect-scrollbar": "1.5.8",
-    "react-router-dom": "6.18.0",
+    "react-router": "^7.11.0",
     "react-transition-group": "4.4.5",
     "react-use": "17.4.0",
     "react-use-measure": "2.1.1",

packages/embed/src/components/app.jsx

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useState, useRef } from 'react'
 
 import { ThemeProvider } from '@audius/harmony'
 import cn from 'classnames'
-import { useParams, useSearchParams } from 'react-router-dom'
+import { useParams, useSearchParams } from 'react-router'
 import { CSSTransition } from 'react-transition-group'
 
 import '@audius/harmony/dist/harmony.css'

packages/embed/src/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
 import { createRoot } from 'react-dom/client'
-import { Route, Routes, BrowserRouter } from 'react-router-dom'
+import { Route, Routes, BrowserRouter } from 'react-router'
 
 import './util/initWeb3'
 import App from './components/app'

packages/mobile/ios/Podfile.lock

@@ -1373,7 +1373,7 @@ PODS:
     - React
     - react-native-google-cast/NoBluetoothArm (= 4.6.2)
   - react-native-google-cast/NoBluetoothArm (4.6.2):
-    - google-cast-sdk-dynamic-xcframework-no-bluetooth (= 4.7.1)
+    - google-cast-sdk-dynamic-xcframework-no-bluetooth
     - React
     - react-native-google-cast/RNGoogleCast
   - react-native-google-cast/RNGoogleCast (4.6.2):
@@ -2908,7 +2908,7 @@ SPEC CHECKSUMS:
   react-native-document-picker: 9fe3cd3187a2995d78d1f34d3a52eac1b68df245
   react-native-fast-crypto: b30594570dab23aca7e74e206b2c03e28a006216
   react-native-get-random-values: 384787fd76976f5aec9465aff6fa9e9129af1e74
-  react-native-google-cast: 0a82cf63114470403e41e04ffa2b13d6448b6112
+  react-native-google-cast: 18b9b2fc518caabfa65d309409e160b3fc6d1733
   react-native-image-picker: 42e3b160d82fb168288345db3b9a2a99aad02afe
   react-native-in-app-review: db8bb167a5f238e7ceca5c242d6b36ce8c4404a4
   react-native-keyboard-controller: 3aaba4f7015628ca833ce7ad889754571cef6455
@@ -2985,4 +2985,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: b77c7dc423273b965d32a03d73fe6277c67877b7
 
-COCOAPODS: 1.16.2
+COCOAPODS: 1.15.2

packages/protocol-dashboard/package.json

@@ -77,7 +77,7 @@
     "react-merge-refs": "^2.1.1",
     "react-perfect-scrollbar": "^1.5.8",
     "react-redux": "8.1.3",
-    "react-router-dom": "6.17.0",
+    "react-router": "^7.11.0",
     "react-spring": "8.0.27",
     "react-use": "^17.4.0",
     "react-use-measure": "^2.1.1",
@@ -105,7 +105,6 @@
     "@types/react-dom": "19.0.0",
     "@types/react-helmet": "5.0.16",
     "@types/react-redux": "7.1.28",
-    "@types/react-router-dom": "5.3.3",
     "@types/react-tooltip": "3.11.0",
     "@types/react-virtualized": "9.21.10",
     "@types/semver": "6.2.1",

packages/protocol-dashboard/src/App.tsx

@@ -14,7 +14,7 @@ import {
   useParams,
   To,
   NavigateProps
-} from 'react-router-dom'
+} from 'react-router'
 
 import Header from 'components/Header'
 import API from 'containers/API'

packages/protocol-dashboard/src/components/MobileNav/MobileNav.tsx

@@ -3,7 +3,7 @@ import { useCallback } from 'react'
 import { IconAudiusLogoHorizontal } from '@audius/harmony'
 import { Button, ButtonType, IconRemove } from '@audius/stems'
 import clsx from 'clsx'
-import { matchPath, useNavigate, useLocation } from 'react-router-dom'
+import { matchPath, useNavigate, useLocation } from 'react-router'
 
 import useOpenLink from 'hooks/useOpenLink'
 import { AUDIUS_DAPP_URL, navRoutes } from 'utils/routes'

packages/protocol-dashboard/src/components/Nav/Nav.tsx

@@ -2,7 +2,7 @@ import { useCallback } from 'react'
 
 import { Button, ButtonType } from '@audius/stems'
 import clsx from 'clsx'
-import { matchPath, useNavigate, useLocation } from 'react-router-dom'
+import { matchPath, useNavigate, useLocation } from 'react-router'
 
 import { navRoutes } from 'utils/routes'
 

packages/protocol-dashboard/src/containers/ContentNodes/ContentNodes.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 
-import { useLocation } from 'react-router-dom'
+import { useLocation } from 'react-router'
 
 import ContentTable from 'components/ContentTable'
 import Page from 'components/Page'

packages/protocol-dashboard/src/containers/DiscoveryProviders/DiscoveryProviders.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 
-import { useLocation } from 'react-router-dom'
+import { useLocation } from 'react-router'
 
 import DiscoveryTable from 'components/DiscoveryTable'
 import Page from 'components/Page'

packages/protocol-dashboard/src/containers/Home/InfoCard.tsx

@@ -1,5 +1,5 @@
 import { Box, PlainButton, Text, IconArrowRight } from '@audius/harmony'
-import { Link } from 'react-router-dom'
+import { Link } from 'react-router'
 
 import { Card } from 'components/Card/Card'
 

packages/protocol-dashboard/src/containers/Node/Node.tsx

@@ -1,6 +1,6 @@
 import { IconEmbed } from '@audius/harmony'
 import clsx from 'clsx'
-import { useParams } from 'react-router-dom'
+import { useParams } from 'react-router'
 
 import IndividualNodeUptimeChart from 'components/IndividualNodeUptimeChart'
 import IndividualServiceApiCallsChart from 'components/IndividualServiceApiCallsChart'

packages/protocol-dashboard/src/containers/Proposal/Proposal.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
 
 import Markdown from 'react-markdown'
-import { useParams } from 'react-router-dom'
+import { useParams } from 'react-router'
 import remarkBreaks from 'remark-breaks'
 import remarkGfm from 'remark-gfm'
 

packages/protocol-dashboard/src/containers/UnregisteredNode/UnregisteredNode.tsx

@@ -1,4 +1,4 @@
-import { useLocation, useMatch } from 'react-router-dom'
+import { useLocation, useMatch } from 'react-router'
 
 import NodeOverview from 'components/NodeOverview'
 import Page from 'components/Page'

packages/protocol-dashboard/src/containers/User/User.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useRef } from 'react'
 
 import { Flex, IconUser } from '@audius/harmony'
-import { matchPath, useLocation, useParams } from 'react-router-dom'
+import { matchPath, useLocation, useParams } from 'react-router'
 
 import { ConnectAudiusProfileCard } from 'components/ConnectAudiusProfileCard/ConnectAudiusProfileCard'
 import { ManageAccountCard } from 'components/ManageAccountCard/ManageAccountCard'

packages/protocol-dashboard/src/providers/RouteHistoryContext.tsx

@@ -1,6 +1,6 @@
 import React, { createContext, useContext, useState, useEffect } from 'react'
 
-import { useLocation } from 'react-router-dom'
+import { useLocation } from 'react-router'
 
 type RouteHistoryContextType = {
   historyStack: string[]

packages/protocol-dashboard/src/utils/effects.ts

@@ -1,6 +1,6 @@
 import { useCallback } from 'react'
 
-import { useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router'
 
 export const usePushRoute = () => {
   const navigate = useNavigate()

packages/protocol-dashboard/src/utils/routes.ts

@@ -1,4 +1,4 @@
-import { useLocation } from 'react-router-dom'
+import { useLocation } from 'react-router'
 
 /**
  * All Routes for the Audius Protocol Dashboard

packages/web/package.json

@@ -73,6 +73,8 @@
   "dependencies": {
     "@amplitude/analytics-browser": "2.11.9",
     "@amplitude/plugin-session-replay-browser": "1.8.2",
+    "@atlaskit/pragmatic-drag-and-drop": "^1.5.0",
+    "@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-migration": "^0.17.7",
     "@audius/common": "*",
     "@audius/fetch-nft": "0.2.8",
     "@audius/fixed-decimal": "*",
@@ -150,8 +152,6 @@
     "prop-types": "15.7.2",
     "query-string": "6.13.5",
     "react": "19.0.0",
-    "@atlaskit/pragmatic-drag-and-drop": "^1.5.0",
-    "@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-migration": "^0.17.7",
     "react-chartjs-2": "2.9.0",
     "react-dates": "18.5.0",
     "react-dom": "19.0.0",
@@ -164,7 +164,7 @@
     "react-plaid-link": "3.6.1",
     "react-qr-code": "2.0.18",
     "react-redux": "8.0.5",
-    "react-router-dom": "^6.22.3",
+    "react-router": "^7.11.0",
     "react-scroll-parallax": "3.3.2",
     "react-spring": "8.0.27",
     "react-table": "7.8.0",
@@ -210,6 +210,7 @@
     "@types/body-scroll-lock": "2.6.1",
     "@types/classnames": "2.2.10",
     "@types/eth-sig-util": "2.1.1",
+    "@types/history": "^4.7.11",
     "@types/js-yaml": "3.12.4",
     "@types/jsmediatags": "3.9.1",
     "@types/linkifyjs": "2.1.3",

packages/web/src/app/App.tsx

@@ -3,7 +3,7 @@ import { Suspense, lazy } from 'react'
 
 import { route } from '@audius/common/utils'
 import { CoinflowPurchaseProtection } from '@coinflowlabs/react'
-import { Navigate, Route, Routes } from 'react-router-dom'
+import { Navigate, Route, Routes } from 'react-router'
 
 import { AppModal } from 'pages/modals/AppModal'
 import { SomethingWrong } from 'pages/something-wrong/SomethingWrong'
@@ -50,24 +50,45 @@ export const App = () => {
               element={<Navigate to={SIGN_IN_PAGE} replace />}
             />
           ))}
-          <Route path={`${SIGN_IN_PAGE}/*`} element={<SignOnPage />} />
-          <Route path={`${SIGN_UP_PAGE}/*`} element={<SignOnPage />} />
+          <Route path={SIGN_IN_PAGE}>
+            <Route index element={<SignOnPage />} />
+            <Route path='*' element={<SignOnPage />} />
+          </Route>
+          <Route path={SIGN_UP_PAGE}>
+            <Route index element={<SignOnPage />} />
+            <Route path='*' element={<SignOnPage />} />
+          </Route>
           <Route path='/oauth/auth/pay' element={<OAuthPayPage />} />
           <Route path='/oauth/pay' element={<OAuthPayPage />} />
           <Route path='/oauth/auth' element={<OAuthLoginPage />} />
-          <Route
-            path={`${PRIVATE_KEY_EXPORTER_SETTINGS_PAGE}/*`}
-            element={
-              <>
-                <PrivateKeyExporterPage />
-                <AppModal
-                  key='PrivateKeyExporter'
-                  name='PrivateKeyExporter'
-                  modal={PrivateKeyExporterModal}
-                />
-              </>
-            }
-          />
+          <Route path={PRIVATE_KEY_EXPORTER_SETTINGS_PAGE}>
+            <Route
+              index
+              element={
+                <>
+                  <PrivateKeyExporterPage />
+                  <AppModal
+                    key='PrivateKeyExporter'
+                    name='PrivateKeyExporter'
+                    modal={PrivateKeyExporterModal}
+                  />
+                </>
+              }
+            />
+            <Route
+              path='*'
+              element={
+                <>
+                  <PrivateKeyExporterPage />
+                  <AppModal
+                    key='PrivateKeyExporter'
+                    name='PrivateKeyExporter'
+                    modal={PrivateKeyExporterModal}
+                  />
+                </>
+              }
+            />
+          </Route>
           <Route
             path='/*'
             element={

packages/web/src/app/AppProviders.tsx

@@ -5,7 +5,7 @@ import { MediaProvider } from '@audius/harmony/src/contexts'
 import { QueryClientProvider } from '@tanstack/react-query'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import { Provider as ReduxProvider } from 'react-redux'
-import { BrowserRouter, HashRouter, useNavigate } from 'react-router-dom'
+import { BrowserRouter, HashRouter, useNavigate } from 'react-router'
 import { PersistGate } from 'redux-persist/integration/react'
 import { WagmiProvider } from 'wagmi'
 
@@ -71,13 +71,20 @@ export const AppProviders = ({ children }: AppProvidersProps) => {
     return <>{children}</>
   }
 
+  // In React Router v7, future flags are enabled by default for declarative routers
+  // The future prop is only available for data routers (createBrowserRouter)
+  // For BrowserRouter/HashRouter, the v7 behavior is the default
+  const routerProps = {
+    basename
+  }
+
   return (
     <WagmiProvider config={wagmiAdapter.wagmiConfig}>
       <QueryClientProvider client={queryClient}>
         <MediaProvider>
           <ReduxProvider store={store}>
             <PersistGate loading={null} persistor={persistor}>
-              <RouterComponent basename={basename}>
+              <RouterComponent {...routerProps}>
                 <NavigationSetup>
                   <RouterContextProvider>
                     <HeaderContextProvider>

packages/web/src/app/web-player/ServerWebPlayer.tsx

@@ -17,8 +17,7 @@ import { Flex } from '@audius/harmony/src/components/layout/Flex'
 import { Text } from '@audius/harmony/src/components/text'
 import { TextLink } from '@audius/harmony/src/components/text-link'
 import { ThemeProvider } from '@audius/harmony/src/foundations/theme/ThemeProvider'
-import { Link } from 'react-router-dom'
-import { StaticRouter } from 'react-router-dom/server'
+import { Link, StaticRouter } from 'react-router'
 
 type WebPlayerContentProps = {
   children: ReactElement

packages/web/src/app/web-player/WebPlayer.jsx

@@ -24,15 +24,16 @@ import { UploadType } from '@audius/common/store'
 import { route } from '@audius/common/utils'
 import cn from 'classnames'
 import { useDispatch, useSelector } from 'react-redux'
-import { generatePath, matchPath } from 'react-router'
 import {
+  generatePath,
+  matchPath,
   Navigate,
   Route,
   Routes,
   useLocation,
   useParams,
   useNavigate
-} from 'react-router-dom'
+} from 'react-router'
 import semver from 'semver'
 
 import { Pages as SignOnPages } from 'common/store/pages/signon/types'

packages/web/src/components/RestrictedLink.tsx

@@ -1,4 +1,4 @@
-import { Link as RouterLink, LinkProps } from 'react-router-dom'
+import { Link as RouterLink, LinkProps } from 'react-router'
 
 import {
   RestrictionType,