React Router v7 (but still using RouterProvider)

* Use "Component" instead of "Element" in route-tree

* Enable react-router v7_partialHydration

* Enable react-router v7_normalizeFormMethod + v7_fetcherPersist + v7_skipActionErrorRevalidation

* Enable react-router v7_relativeSplatPath

* Enable react-router v7_startTransition

* Upgrade to react-router v7

* Remove react-router futures

* Move Views from views/ to routes/

* Consolidate lib/route-tree.ts into routes.ts

* Rename all route files into lowercase

* Regenerate bun.lockb

* Format package.json

* Oopsie

package.json

@@ -49,7 +49,7 @@
     "react-dom": "^18.3.1",
     "react-fontawesome": "^1.7.1",
     "react-keybinding-component": "^2.2.0",
-    "react-router-dom": "6.28.0",
+    "react-router": "^7.0.2",
     "semver": "^7.6.3",
     "zustand": "^5.0.1"
   },
@@ -76,5 +76,6 @@
     "typescript-plugin-css-modules": "^5.1.0",
     "vite": "^6.0.2",
     "vite-plugin-svgr": "^4.3.0"
-  }
+  },
+  "trustedDependencies": ["@biomejs/biome", "@parcel/watcher"]
 }

src/components/Footer.tsx

@@ -1,6 +1,6 @@
 import { useCallback } from 'react';
 import Icon from 'react-fontawesome';
-import { NavLink } from 'react-router-dom';
+import { NavLink } from 'react-router';
 
 import useLibraryStore from '../stores/useLibraryStore';
 import ProgressBar from './ProgressBar';

src/components/GlobalErrorBoundary.tsx

@@ -3,7 +3,7 @@
  */
 
 import * as logger from '@tauri-apps/plugin-log';
-import { isRouteErrorResponse, useRouteError } from 'react-router-dom';
+import { isRouteErrorResponse, useRouteError } from 'react-router';
 import ExternalLink from '../elements/ExternalLink';
 import * as ViewMessage from '../elements/ViewMessage';
 

src/components/IPCNavigationEvents.tsx

@@ -1,6 +1,6 @@
 import { getCurrentWindow } from '@tauri-apps/api/window';
 import { useEffect } from 'react';
-import { createSearchParams, useNavigate } from 'react-router-dom';
+import { createSearchParams, useNavigate } from 'react-router';
 
 import usePlayerStore from '../stores/usePlayerStore';
 

src/components/SideNavLink.tsx

@@ -1,4 +1,4 @@
-import { NavLink } from 'react-router-dom';
+import { NavLink } from 'react-router';
 
 import {
   Menu,

src/components/TracksList.tsx

@@ -9,7 +9,7 @@ import {
 import type React from 'react';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import Keybinding from 'react-keybinding-component';
-import { useNavigate, useSearchParams } from 'react-router-dom';
+import { useNavigate, useSearchParams } from 'react-router';
 
 import type { Config, Playlist, Track } from '../generated/typings';
 import { logAndNotifyError } from '../lib/utils';

src/elements/SettingsNav.tsx

@@ -1,6 +1,6 @@
 import cx from 'classnames';
 import type React from 'react';
-import { NavLink } from 'react-router-dom';
+import { NavLink } from 'react-router';
 
 import styles from './SettingsNav.module.css';
 

src/hooks/useInvalidate.ts

@@ -1,6 +1,6 @@
 import { useQueryClient } from '@tanstack/react-query';
 import { useCallback } from 'react';
-import { useRevalidator } from 'react-router-dom';
+import { useRevalidator } from 'react-router';
 
 /**
  * Hook returning a function to be manually called after anything that represents

src/hooks/useScrollRestoration.ts

@@ -1,6 +1,6 @@
 import debounce from 'lodash-es/debounce';
 import { useEffect, useState } from 'react';
-import { useLocation, useNavigation } from 'react-router-dom';
+import { useLocation, useNavigation } from 'react-router';
 
 function getScrollPosition(key: string) {
   const pos = window.sessionStorage.getItem(key);

src/main.tsx

@@ -10,10 +10,10 @@ import { QueryClientProvider } from '@tanstack/react-query';
 import * as logger from '@tauri-apps/plugin-log';
 import React from 'react';
 import * as ReactDOM from 'react-dom/client';
-import { RouterProvider } from 'react-router-dom';
+import { RouterProvider } from 'react-router';
 
 import queryClient from './lib/query-client';
-import router from './lib/router';
+import router from './routes';
 
 /*
 |--------------------------------------------------------------------------

src/routes.tsx

@@ -0,0 +1,82 @@
+import { type RouteObject, createHashRouter } from 'react-router';
+
+import GlobalErrorBoundary from './components/GlobalErrorBoundary';
+import RootView from './routes/Root';
+import ViewLibrary from './routes/library';
+import ViewPlaylistDetails from './routes/playlist-details';
+import ViewPlaylists from './routes/playlists';
+import ViewSettings from './routes/settings';
+import ViewSettingsAbout from './routes/settings-about';
+import ViewSettingsAudio from './routes/settings-audio';
+import ViewSettingsLibrary from './routes/settings-library';
+import ViewSettingsUI from './routes/settings-ui';
+import ViewTrackDetails from './routes/track-details';
+
+const routeTree: RouteObject[] = [
+  {
+    path: '/',
+    id: 'root',
+    Component: RootView,
+    loader: RootView.loader,
+    HydrateFallback: () => null, // there should be no hydration as we're SPA-only
+    ErrorBoundary: GlobalErrorBoundary,
+    children: [
+      {
+        path: 'library',
+        id: 'library',
+        Component: ViewLibrary,
+        loader: ViewLibrary.loader,
+      },
+      {
+        path: 'playlists',
+        id: 'playlists',
+        Component: ViewPlaylists,
+        loader: ViewPlaylists.loader,
+        children: [
+          {
+            path: ':playlistID',
+            id: 'playlist-details',
+            Component: ViewPlaylistDetails,
+            loader: ViewPlaylistDetails.loader,
+          },
+        ],
+      },
+      {
+        path: 'settings',
+        id: 'settings',
+        Component: ViewSettings,
+        children: [
+          {
+            path: 'library',
+            Component: ViewSettingsLibrary,
+            loader: ViewSettings.loader,
+          },
+          {
+            path: 'interface',
+            Component: ViewSettingsUI,
+            loader: ViewSettings.loader,
+          },
+          {
+            path: 'audio',
+            Component: ViewSettingsAudio,
+            loader: ViewSettings.loader,
+          },
+          {
+            path: 'about',
+            Component: ViewSettingsAbout,
+            loader: ViewSettings.loader,
+          },
+        ],
+      },
+      {
+        path: 'details/:trackID',
+        Component: ViewTrackDetails,
+        loader: ViewTrackDetails.loader,
+      },
+    ],
+  },
+];
+
+const router = createHashRouter(routeTree);
+
+export default router;

src/views/Root.tsx → src/routes/Root.tsx

@@ -1,5 +1,5 @@
 import { Suspense, useEffect } from 'react';
-import { Outlet } from 'react-router-dom';
+import { Outlet } from 'react-router';
 
 import AppEvents from '../components/AppEvents';
 import DropzoneImport from '../components/DropzoneImport';

src/views/ViewLibrary.tsx → src/routes/library.tsx

@@ -1,6 +1,6 @@
 import { useQuery } from '@tanstack/react-query';
 import { useMemo } from 'react';
-import { Link, useLoaderData } from 'react-router-dom';
+import { Link, useLoaderData } from 'react-router';
 
 import TracksList from '../components/TracksList';
 import View from '../elements/View';

src/views/ViewPlaylistDetails.tsx → src/routes/playlist-details.tsx

@@ -5,7 +5,7 @@ import {
   redirect,
   useLoaderData,
   useParams,
-} from 'react-router-dom';
+} from 'react-router';
 
 import TracksList from '../components/TracksList';
 import * as ViewMessage from '../elements/ViewMessage';

src/views/ViewPlaylists.tsx → src/routes/playlists.tsx

@@ -10,7 +10,7 @@ import {
   useLoaderData,
   useNavigate,
   useParams,
-} from 'react-router-dom';
+} from 'react-router';
 
 import SideNav from '../components/SideNav';
 import SideNavLink from '../components/SideNavLink';

src/views/ViewSettingsAbout.tsx → src/routes/settings-about.tsx

@@ -1,4 +1,4 @@
-import { useLoaderData } from 'react-router-dom';
+import { useLoaderData } from 'react-router';
 
 import * as Setting from '../components/Setting';
 import CheckboxSetting from '../components/SettingCheckbox';
@@ -9,7 +9,7 @@ import Flexbox from '../elements/Flexbox';
 import Heart from '../elements/Heart';
 import useInvalidate, { useInvalidateCallback } from '../hooks/useInvalidate';
 import SettingsAPI from '../stores/SettingsAPI';
-import type { SettingsLoaderData } from './ViewSettings';
+import type { SettingsLoaderData } from './settings';
 
 export default function ViewSettingsAbout() {
   const { config, version, tauriVersion, appStorageDir } =

src/views/ViewSettingsAudio.tsx → src/routes/settings-audio.tsx

@@ -1,11 +1,11 @@
-import { useLoaderData } from 'react-router-dom';
+import { useLoaderData } from 'react-router';
 
 import AudioOutputSelect from '../components/AudioOutputSelect';
 import * as Setting from '../components/Setting';
 import { usePlayerAPI } from '../stores/usePlayerStore';
 
 import useInvalidate, { useInvalidateCallback } from '../hooks/useInvalidate';
-import type { SettingsLoaderData } from './ViewSettings';
+import type { SettingsLoaderData } from './settings';
 
 export default function ViewSettingsAudio() {
   const { config } = useLoaderData() as SettingsLoaderData;

src/views/ViewSettingsLibrary.tsx → src/routes/settings-library.tsx

@@ -1,4 +1,4 @@
-import { useLoaderData } from 'react-router-dom';
+import { useLoaderData } from 'react-router';
 
 import * as Setting from '../components/Setting';
 import CheckboxSetting from '../components/SettingCheckbox';
@@ -7,8 +7,9 @@ import Flexbox from '../elements/Flexbox';
 import useInvalidate, { useInvalidateCallback } from '../hooks/useInvalidate';
 import SettingsAPI from '../stores/SettingsAPI';
 import useLibraryStore, { useLibraryAPI } from '../stores/useLibraryStore';
-import type { SettingsLoaderData } from './ViewSettings';
-import styles from './ViewSettingsLibrary.module.css';
+import type { SettingsLoaderData } from './settings';
+
+import styles from './settings-library.module.css';
 
 export default function ViewSettingsLibrary() {
   const libraryAPI = useLibraryAPI();

src/views/ViewSettingsUI.tsx → src/routes/settings-ui.tsx

@@ -1,12 +1,12 @@
-import { useLoaderData } from 'react-router-dom';
+import { useLoaderData } from 'react-router';
 
 import * as Setting from '../components/Setting';
 import CheckboxSetting from '../components/SettingCheckbox';
 import type { Config, DefaultView } from '../generated/typings';
 import useInvalidate, { useInvalidateCallback } from '../hooks/useInvalidate';
 import { themes } from '../lib/themes';
 import SettingsAPI from '../stores/SettingsAPI';
-import type { SettingsLoaderData } from './ViewSettings';
+import type { SettingsLoaderData } from './settings';
 
 export default function ViewSettingsUI() {
   const { config } = useLoaderData() as SettingsLoaderData;

src/views/ViewSettings.tsx → src/routes/settings.tsx

@@ -1,13 +1,13 @@
 import { getTauriVersion, getVersion } from '@tauri-apps/api/app';
 import { invoke } from '@tauri-apps/api/core';
-import { Navigate, Outlet, useMatch } from 'react-router-dom';
+import { Navigate, Outlet, useMatch } from 'react-router';
 
 import * as SettingNav from '../elements/SettingsNav';
 import View from '../elements/View';
 import config from '../lib/config';
 import type { LoaderData } from '../types/museeks';
 
-import styles from './ViewSettings.module.css';
+import styles from './settings.module.css';
 
 export default function ViewSettingsView() {
   const match = useMatch('/settings');

src/views/ViewTrackDetails.tsx → src/routes/track-details.tsx

@@ -4,7 +4,7 @@ import {
   type LoaderFunctionArgs,
   useLoaderData,
   useNavigate,
-} from 'react-router-dom';
+} from 'react-router';
 
 import * as Setting from '../components/Setting';
 import Button from '../elements/Button';
@@ -16,7 +16,8 @@ import useInvalidate from '../hooks/useInvalidate';
 import database from '../lib/database';
 import { useLibraryAPI } from '../stores/useLibraryStore';
 import type { LoaderData, TrackMutation } from '../types/museeks';
-import styles from './ViewTrackDetails.module.css';
+
+import styles from './track-details.module.css';
 
 // We assume no artist or genre has a comma in its name (fingers crossed)
 const DELIMITER = ',';

src/types/museeks.ts

@@ -1,4 +1,4 @@
-import type { LoaderFunctionArgs } from 'react-router-dom';
+import type { LoaderFunctionArgs } from 'react-router';
 
 import type { Track } from '../generated/typings';