migrate to react-router v7 and BrowserRouter

2026-05-06 20:10:12 +02:00 · 2025-10-22 19:41:17 -07:00
parent 2504c0ec10
commit bf75dec0ce
42 changed files with 81 additions and 73 deletions
@@ -124,8 +124,7 @@
        "react-image": "^4.1.0",
        "react-loading-skeleton": "^3.5.0",
        "react-player": "^2.11.0",
-        "react-router": "^6.16.0",
-        "react-router-dom": "^6.16.0",
+        "react-router": "^7.9.4",
        "react-window-v2": "npm:react-window@^2.2.0",
        "semver": "^7.5.4",
        "string-to-color": "^2.2.2",
@@ -163,7 +163,7 @@ importers:
        version: https://codeload.github.com/jeffvli/Node-MPV/tar.gz/32b4d64395289ad710c41d481d2707a7acfc228f
      nuqs:
        specifier: ^2.7.1
-        version: 2.7.1(react-router-dom@6.30.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-router@6.30.1(react@19.1.0))(react@19.1.0)
+        version: 2.7.1(react-router-dom@7.9.4(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-router@7.9.4(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react@19.1.0)
      overlayscrollbars:
        specifier: ^2.11.1
        version: 2.11.3
@@ -201,11 +201,8 @@ importers:
        specifier: ^2.11.0
        version: 2.16.0(react@19.1.0)
      react-router:
-        specifier: ^6.16.0
-        version: 6.30.1(react@19.1.0)
-      react-router-dom:
-        specifier: ^6.16.0
-        version: 6.30.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+        specifier: ^7.9.4
+        version: 7.9.4(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
      react-window-v2:
        specifier: npm:react-window@^2.2.0
        version: react-window@2.2.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@@ -1669,10 +1666,6 @@ packages:
    peerDependencies:
      react: ^16.8 || ^17.0 || ^18.0

-  '@remix-run/router@1.23.0':
-    resolution: {integrity: sha512-O3rHJzAQKamUz1fvE0Qaw0xSFqsA/yafi2iqeE0pvdFtCO1viYx8QL6f3Ln/aCCTLxs68SLf0KPM9eSeM8yBnA==}
-    engines: {node: '>=14.0.0'}
-
  '@rolldown/pluginutils@1.0.0-beta.9':
    resolution: {integrity: sha512-e9MeMtVWo186sgvFFJOPGy7/d2j2mZhLJIdVW0C/xDluuOvymEATqz6zKsP0ZmXGzQtqlyjz5sC1sYQUoJG98w==}

@@ -2529,6 +2522,10 @@ packages:
  convert-source-map@2.0.0:
    resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}

+  cookie@1.0.2:
+    resolution: {integrity: sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==}
+    engines: {node: '>=18'}
+
  core-js-compat@3.45.1:
    resolution: {integrity: sha512-tqTt5T4PzsMIZ430XGviK4vzYSoeNJ6CXODi6c/voxOT6IZqBht5/EKaSNnYiEjjRYxjVz7DQIsOsY0XNi8PIA==}

@@ -4572,18 +4569,22 @@ packages:
      '@types/react':
        optional: true

-  react-router-dom@6.30.1:
-    resolution: {integrity: sha512-llKsgOkZdbPU1Eg3zK8lCn+sjD9wMRZZPuzmdWWX5SUs8OFkN5HnFVC0u5KMeMaC9aoancFI/KoLuKPqN+hxHw==}
-    engines: {node: '>=14.0.0'}
+  react-router-dom@7.9.4:
+    resolution: {integrity: sha512-f30P6bIkmYvnHHa5Gcu65deIXoA2+r3Eb6PJIAddvsT9aGlchMatJ51GgpU470aSqRRbFX22T70yQNUGuW3DfA==}
+    engines: {node: '>=20.0.0'}
    peerDependencies:
-      react: '>=16.8'
-      react-dom: '>=16.8'
+      react: '>=18'
+      react-dom: '>=18'

-  react-router@6.30.1:
-    resolution: {integrity: sha512-X1m21aEmxGXqENEPG3T6u0Th7g0aS4ZmoNynhbs+Cn+q+QGTLt+d5IQ2bHAXKzKcxGJjxACpVbnYQSCRcfxHlQ==}
-    engines: {node: '>=14.0.0'}
+  react-router@7.9.4:
+    resolution: {integrity: sha512-SD3G8HKviFHg9xj7dNODUKDFgpG4xqD5nhyd0mYoB5iISepuZAvzSr8ywxgxKJ52yRzf/HWtVHc9AWwoTbljvA==}
+    engines: {node: '>=20.0.0'}
    peerDependencies:
-      react: '>=16.8'
+      react: '>=18'
+      react-dom: '>=18'
+    peerDependenciesMeta:
+      react-dom:
+        optional: true

  react-style-singleton@2.2.3:
    resolution: {integrity: sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==}
@@ -4936,6 +4937,9 @@ packages:
  serialize-javascript@6.0.2:
    resolution: {integrity: sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==}

+  set-cookie-parser@2.7.1:
+    resolution: {integrity: sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==}
+
  set-function-length@1.2.2:
    resolution: {integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==}
    engines: {node: '>= 0.4'}
@@ -7242,8 +7246,6 @@ snapshots:
      '@babel/runtime': 7.27.1
      react: 19.1.0

-  '@remix-run/router@1.23.0': {}
-
  '@rolldown/pluginutils@1.0.0-beta.9': {}

  '@rollup/plugin-babel@5.3.1(@babel/core@7.27.1)(@types/babel__core@7.20.5)(rollup@2.79.2)':
@@ -8215,6 +8217,8 @@ snapshots:

  convert-source-map@2.0.0: {}

+  cookie@1.0.2: {}
+
  core-js-compat@3.45.1:
    dependencies:
      browserslist: 4.27.0
@@ -10034,13 +10038,13 @@ snapshots:
    dependencies:
      boolbase: 1.0.0

-  nuqs@2.7.1(react-router-dom@6.30.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-router@6.30.1(react@19.1.0))(react@19.1.0):
+  nuqs@2.7.1(react-router-dom@7.9.4(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-router@7.9.4(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react@19.1.0):
    dependencies:
      '@standard-schema/spec': 1.0.0
      react: 19.1.0
    optionalDependencies:
-      react-router: 6.30.1(react@19.1.0)
-      react-router-dom: 6.30.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      react-router: 7.9.4(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      react-router-dom: 7.9.4(react-dom@19.1.0(react@19.1.0))(react@19.1.0)

  object-assign@4.1.1: {}

@@ -10444,17 +10448,20 @@ snapshots:
    optionalDependencies:
      '@types/react': 18.3.23

-  react-router-dom@6.30.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
+  react-router-dom@7.9.4(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
    dependencies:
-      '@remix-run/router': 1.23.0
      react: 19.1.0
      react-dom: 19.1.0(react@19.1.0)
-      react-router: 6.30.1(react@19.1.0)
+      react-router: 7.9.4(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+    optional: true

-  react-router@6.30.1(react@19.1.0):
+  react-router@7.9.4(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
    dependencies:
-      '@remix-run/router': 1.23.0
+      cookie: 1.0.2
      react: 19.1.0
+      set-cookie-parser: 2.7.1
+    optionalDependencies:
+      react-dom: 19.1.0(react@19.1.0)

  react-style-singleton@2.2.3(@types/react@18.3.23)(react@19.1.0):
    dependencies:
@@ -10810,6 +10817,8 @@ snapshots:
    dependencies:
      randombytes: 2.1.0

+  set-cookie-parser@2.7.1: {}
+
  set-function-length@1.2.2:
    dependencies:
      define-data-property: 1.1.4
@@ -3,7 +3,7 @@ import formatDuration from 'format-duration';
 import React from 'react';
 import { TFunction, useTranslation } from 'react-i18next';
 import { generatePath } from 'react-router';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';

 import styles from './card-rows.module.css';

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { generatePath, Link } from 'react-router-dom';
+import { generatePath, Link } from 'react-router';

 import styles from './poster-card.module.css';

@@ -4,7 +4,7 @@ import type { MouseEvent } from 'react';
 import { AnimatePresence, motion } from 'motion/react';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { generatePath, Link } from 'react-router-dom';
+import { generatePath, Link } from 'react-router';

 import styles from './feature-carousel.module.css';

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import { AnimatePresence } from 'motion/react';
 import { Dispatch, Fragment, memo, ReactNode, SetStateAction, useState } from 'react';
-import { generatePath, Link } from 'react-router-dom';
+import { generatePath, Link } from 'react-router';

 import styles from './item-card.module.css';

@@ -1,6 +1,6 @@
 import { AnimatePresence } from 'motion/react';
 import { MouseEvent, useMemo, useState } from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';

 import styles from './item-detail.module.css';

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import { Fragment, memo, useMemo } from 'react';
-import { generatePath, Link } from 'react-router-dom';
+import { generatePath, Link } from 'react-router';

 import styles from './album-artists-column.module.css';

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import { Fragment, memo, useMemo } from 'react';
-import { generatePath, Link } from 'react-router-dom';
+import { generatePath, Link } from 'react-router';

 import styles from './album-artists-column.module.css';

@@ -1,5 +1,5 @@
 import { memo, useMemo } from 'react';
-import { generatePath, Link } from 'react-router-dom';
+import { generatePath, Link } from 'react-router';

 import styles from './genre-badge-column.module.css';

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import { Fragment, memo, useMemo } from 'react';
-import { generatePath, Link } from 'react-router-dom';
+import { generatePath, Link } from 'react-router';

 import styles from './genre-column.module.css';

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';

 import styles from './title-column.module.css';

@@ -1,5 +1,5 @@
 import { CSSProperties, useMemo } from 'react';
-import { generatePath, Link } from 'react-router-dom';
+import { generatePath, Link } from 'react-router';

 import styles from './title-combined-column.module.css';

@@ -3,7 +3,7 @@ import type { ICellRendererParams } from '@ag-grid-community/core';

 import React from 'react';
 import { generatePath } from 'react-router';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';

 import { CellContainer } from '/@/renderer/components/virtual-table/cells/generic-cell';
 import { AppRoute } from '/@/renderer/router/routes';
@@ -3,7 +3,7 @@ import type { ICellRendererParams } from '@ag-grid-community/core';

 import React from 'react';
 import { generatePath } from 'react-router';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';

 import { CellContainer } from '/@/renderer/components/virtual-table/cells/generic-cell';
 import { AppRoute } from '/@/renderer/router/routes';
@@ -2,7 +2,7 @@ import type { ICellRendererParams } from '@ag-grid-community/core';

 import React, { useMemo } from 'react';
 import { generatePath } from 'react-router';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';

 import styles from './combined-title-cell.module.css';

@@ -1,7 +1,7 @@
 import type { ICellRendererParams } from '@ag-grid-community/core';

 import clsx from 'clsx';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';

 import styles from './generic-cell.module.css';

@@ -2,7 +2,7 @@ import type { AlbumArtist, Artist } from '/@/shared/types/domain-types';
 import type { ICellRendererParams } from '@ag-grid-community/core';

 import React from 'react';
-import { generatePath, Link } from 'react-router-dom';
+import { generatePath, Link } from 'react-router';

 import { CellContainer } from '/@/renderer/components/virtual-table/cells/generic-cell';
 import { useGenreRoute } from '/@/renderer/hooks/use-genre-route';
@@ -14,7 +14,7 @@ import debounce from 'lodash/debounce';
 import orderBy from 'lodash/orderBy';
 import { MutableRefObject, useCallback, useMemo } from 'react';
 import { generatePath, useNavigate } from 'react-router';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router';

 import { api } from '/@/renderer/api';
 import { queryKeys, QueryPagination } from '/@/renderer/api/query-keys';
@@ -1,6 +1,6 @@
 import { openModal } from '@mantine/modals';
 import { useTranslation } from 'react-i18next';
-import { Navigate } from 'react-router-dom';
+import { Navigate } from 'react-router';

 import { PageHeader } from '/@/renderer/components/page-header/page-header';
 import { ActionRequiredContainer } from '/@/renderer/features/action-required/components/action-required-container';
@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router';

 import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
 import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
@@ -6,7 +6,7 @@ import { useQuery } from '@tanstack/react-query';
 import { MutableRefObject, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { generatePath, useParams } from 'react-router';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';

 import styles from './album-detail-content.module.css';

@@ -2,7 +2,7 @@ import { useQuery } from '@tanstack/react-query';
 import { forwardRef, Ref, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { generatePath, useParams } from 'react-router';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';

 import { queryKeys } from '/@/renderer/api/query-keys';
 import { albumQueries } from '/@/renderer/features/albums/api/album-api';
@@ -1,5 +1,5 @@
 import { useMemo, useState } from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams } from 'react-router';

 import { ListContext } from '/@/renderer/context/list-context';
 import { AlbumListContent } from '/@/renderer/features/albums/components/album-list-content';
@@ -2,7 +2,7 @@ import { useQuery } from '@tanstack/react-query';
 import { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 import { generatePath, useParams } from 'react-router';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';

 import styles from './dummy-album-detail-route.module.css';

@@ -3,7 +3,7 @@ import { useQuery } from '@tanstack/react-query';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { generatePath, useParams } from 'react-router';
-import { createSearchParams, Link } from 'react-router-dom';
+import { createSearchParams, Link } from 'react-router';

 import styles from './album-artist-detail-content.module.css';

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import { TFunction, useTranslation } from 'react-i18next';
 import { generatePath } from 'react-router';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';

 import { SongPath } from '/@/renderer/features/item-details/components/song-path';
 import { useGenreRoute } from '/@/renderer/hooks/use-genre-route';
@@ -3,7 +3,7 @@ import clsx from 'clsx';
 import { AnimatePresence, HTMLMotionProps, motion, Variants } from 'motion/react';
 import { Fragment, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { generatePath } from 'react-router';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';

 import styles from './full-screen-player-image.module.css';

@@ -3,7 +3,7 @@ import clsx from 'clsx';
 import { AnimatePresence, LayoutGroup, motion } from 'motion/react';
 import React, { MouseEvent } from 'react';
 import { useTranslation } from 'react-i18next';
-import { generatePath, Link } from 'react-router-dom';
+import { generatePath, Link } from 'react-router';

 import styles from './left-controls.module.css';

@@ -3,7 +3,7 @@ import { nanoid } from 'nanoid/non-secure';
 import { Dispatch, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { generatePath, useNavigate } from 'react-router';
-import { createSearchParams } from 'react-router-dom';
+import { createSearchParams } from 'react-router';

 import { CreatePlaylistForm } from '/@/renderer/features/playlists/components/create-playlist-form';
 import { Command, CommandPalettePages } from '/@/renderer/features/search/components/command';
@@ -3,7 +3,7 @@ import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/li
 import { RowDoubleClickedEvent } from '@ag-grid-community/core';
 import { MutableRefObject } from 'react';
 import { generatePath, useNavigate } from 'react-router';
-import { useParams, useSearchParams } from 'react-router-dom';
+import { useParams, useSearchParams } from 'react-router';

 import { useCurrentSongRowStyles } from '/@/renderer/components/virtual-table/hooks/use-current-song-row-styles';
 import { useVirtualTable } from '/@/renderer/components/virtual-table/hooks/use-virtual-table';
@@ -3,7 +3,7 @@ import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/li
 import debounce from 'lodash/debounce';
 import { ChangeEvent, MutableRefObject } from 'react';
 import { useTranslation } from 'react-i18next';
-import { generatePath, Link, useParams, useSearchParams } from 'react-router-dom';
+import { generatePath, Link, useParams, useSearchParams } from 'react-router';

 import { PageHeader } from '/@/renderer/components/page-header/page-header';
 import { FilterBar } from '/@/renderer/features/shared/components/filter-bar';
@@ -3,7 +3,7 @@ import { AutoTextSize } from 'auto-text-size';
 import clsx from 'clsx';
 import { forwardRef, ReactNode, Ref, useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';

 import styles from './library-header.module.css';

@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import { motion } from 'motion/react';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { NavLink, useNavigate } from 'react-router-dom';
+import { NavLink, useNavigate } from 'react-router';

 import styles from './collapsed-sidebar.module.css';

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import { memo } from 'react';
-import { Link, LinkProps } from 'react-router-dom';
+import { Link, LinkProps } from 'react-router';

 import styles from './sidebar-item.module.css';

@@ -4,7 +4,7 @@ import clsx from 'clsx';
 import { MouseEvent, useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { generatePath } from 'react-router';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';

 import styles from './sidebar-playlist-list.module.css';

@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import { AnimatePresence, motion } from 'motion/react';
 import { CSSProperties, MouseEvent, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';

 import styles from './sidebar.module.css';

@@ -1,6 +1,6 @@
 import { useQuery } from '@tanstack/react-query';
 import { useMemo, useState } from 'react';
-import { useParams, useSearchParams } from 'react-router-dom';
+import { useParams, useSearchParams } from 'react-router';

 import { ListContext } from '/@/renderer/context/list-context';
 import { genresQueries } from '/@/renderer/features/genres/api/genres-api';
@@ -2,7 +2,7 @@ import { closeAllModals, openModal } from '@mantine/modals';
 import isElectron from 'is-electron';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';

 import packageJson from '../../../../../package.json';

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

 import styles from './auth-layout.module.css';

@@ -1,7 +1,7 @@
 import isElectron from 'is-electron';
 import { NuqsAdapter } from 'nuqs/adapters/react-router/v6';
 import { useEffect, useMemo } from 'react';
-import { Navigate, Outlet } from 'react-router-dom';
+import { Navigate, Outlet } from 'react-router';

 import { useServerAuthenticated } from '/@/renderer/hooks/use-server-authenticated';
 import { AppRoute } from '/@/renderer/router/routes';
@@ -1,5 +1,5 @@
 import { lazy, Suspense } from 'react';
-import { HashRouter, Route, Routes } from 'react-router-dom';
+import { BrowserRouter, Route, Routes } from 'react-router';

 import { AppRoute } from './routes';

@@ -69,7 +69,7 @@ const RouteErrorBoundary = lazy(

 export const AppRouter = () => {
    const router = (
-        <HashRouter future={{ v7_startTransition: true }}>
+        <BrowserRouter>
            <ModalsProvider
                modals={{
                    addToPlaylist: AddToPlaylistContextModal,
@@ -206,7 +206,7 @@ export const AppRouter = () => {
                    </Route>
                </Routes>
            </ModalsProvider>
-        </HashRouter>
+        </BrowserRouter>
    );

    return <Suspense fallback={<></>}>{router}</Suspense>;