migrate to react-router v7 and BrowserRouter

src/renderer/components/card/card-rows.tsx

@@ -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';
 

src/renderer/components/card/poster-card.tsx

@@ -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';
 

src/renderer/components/feature-carousel/feature-carousel.tsx

@@ -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';
 

src/renderer/components/item-card/item-card.tsx

@@ -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';
 

src/renderer/components/item-detail/item-detail.tsx

@@ -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';
 

src/renderer/components/item-list/item-table-list/columns/album-artists-column.tsx

@@ -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';
 

src/renderer/components/item-list/item-table-list/columns/artists-column.tsx

@@ -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';
 

src/renderer/components/item-list/item-table-list/columns/genre-badge-column.tsx

@@ -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';
 

src/renderer/components/item-list/item-table-list/columns/genre-column.tsx

@@ -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';
 

src/renderer/components/item-list/item-table-list/columns/title-column.tsx

@@ -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';
 

src/renderer/components/item-list/item-table-list/columns/title-combined-column.tsx

@@ -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';
 

src/renderer/components/virtual-table/cells/album-artist-cell.tsx

@@ -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';

src/renderer/components/virtual-table/cells/artist-cell.tsx

@@ -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';

src/renderer/components/virtual-table/cells/combined-title-cell.tsx

@@ -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';
 

src/renderer/components/virtual-table/cells/generic-cell.tsx

@@ -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';
 

src/renderer/components/virtual-table/cells/genre-cell.tsx

@@ -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';

src/renderer/components/virtual-table/hooks/use-virtual-table.ts

@@ -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';

src/renderer/features/action-required/routes/action-required-route.tsx

@@ -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';

src/renderer/features/action-required/routes/invalid-route.tsx

@@ -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';

src/renderer/features/albums/components/album-detail-content.tsx

@@ -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';
 

src/renderer/features/albums/components/album-detail-header.tsx

@@ -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';

src/renderer/features/albums/routes/album-list-route.tsx

@@ -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';

src/renderer/features/albums/routes/dummy-album-detail-route.tsx

@@ -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';
 

src/renderer/features/artists/components/album-artist-detail-content.tsx

@@ -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';
 

src/renderer/features/item-details/components/item-details-modal.tsx

@@ -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';

src/renderer/features/player/components/full-screen-player-image.tsx

@@ -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';
 

src/renderer/features/player/components/left-controls.tsx

@@ -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';
 

src/renderer/features/search/components/home-commands.tsx

@@ -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';

src/renderer/features/search/components/search-content.tsx

@@ -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';

src/renderer/features/search/components/search-header.tsx

@@ -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';

src/renderer/features/shared/components/library-header.tsx

@@ -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';
 

src/renderer/features/sidebar/components/collapsed-sidebar.tsx

@@ -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';
 

src/renderer/features/sidebar/components/sidebar-item.tsx

@@ -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';
 

src/renderer/features/sidebar/components/sidebar-playlist-list.tsx

@@ -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';
 

src/renderer/features/sidebar/components/sidebar.tsx

@@ -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';
 

src/renderer/features/songs/routes/song-list-route.tsx

@@ -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';

src/renderer/features/titlebar/components/app-menu.tsx

@@ -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';
 

src/renderer/layouts/auth-layout.tsx

@@ -1,4 +1,4 @@
-import { Outlet } from 'react-router-dom';
+import { Outlet } from 'react-router';
 
 import styles from './auth-layout.module.css';
 

src/renderer/router/app-outlet.tsx

@@ -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';

src/renderer/router/app-router.tsx

@@ -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>;