chore: upgrade react router

2026-08-14 11:53:49 +00:00 · 2025-07-23 21:11:25 +02:00
parent 7a322406da
commit 8c90f5043f
29 changed files with 50 additions and 58 deletions
@@ -28,7 +28,7 @@
    "react-hook-form": "^7.53.1",
    "react-icons": "5.4.0",
    "react-qr-code": "^2.0.12",
-    "react-router-dom": "^6.3.0",
+    "react-router": "^7.7.0",
    "react-simple-code-editor": "^0.14.1",
    "web-vitals": "^3.1.1",
    "zustand": "^5.0.3"
@@ -1,4 +1,4 @@
-import { BrowserRouter } from 'react-router-dom';
+import { BrowserRouter } from 'react-router';
 import { Tooltip } from '@base-ui-components/react/tooltip';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Navigate, Route } from 'react-router-dom';
+import { Navigate, Route, useLocation } from 'react-router';

 import { useClientPath } from './common/hooks/useClientPath';
 import Log from './features/log/Log';
@@ -1,5 +1,5 @@
 import { type PropsWithChildren } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';

 import style from './AppLink.module.scss';

@@ -1,6 +1,6 @@
 import { memo } from 'react';
 import { IoClose, IoContract, IoExpand, IoLockClosedOutline, IoSwapVertical } from 'react-icons/io5';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { Dialog } from '@base-ui-components/react/dialog';
 import { useDisclosure, useFullscreen } from '@mantine/hooks';

@@ -1,6 +1,6 @@
 import { PropsWithChildren } from 'react';
 import { IoArrowUp } from 'react-icons/io5';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';

 import { useElectronEvent } from '../../../hooks/useElectronEvent';
 import { handleLinks } from '../../../utils/linkUtils';
@@ -1,5 +1,5 @@
 import { IoLockClosedOutline } from 'react-icons/io5';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';

 import { useIsSmallDevice } from '../../../hooks/useIsSmallDevice';
 import NavigationMenuItem from '../navigation-menu-item/NavigationMenuItem';
@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router';

 import { isStringBoolean } from '../../../features/viewers/common/viewUtils';
 import { useViewParamsEditorStore } from '../view-params-editor/viewParamsEditor.store';
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router';

 import { isStringBoolean } from '../../../features/viewers/common/viewUtils';
 import Checkbox from '../checkbox/Checkbox';
@@ -1,4 +1,4 @@
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router';
 import { OntimeView, URLPreset } from 'ontime-types';

 import { useViewUrlPresets } from '../../hooks-query/useUrlPresets';
@@ -1,6 +1,6 @@
 import { FormEvent, memo, useReducer } from 'react';
 import { IoClose } from 'react-icons/io5';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router';
 import { Dialog } from '@base-ui-components/react/dialog';
 import { OntimeView } from 'ontime-types';

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router';
 import { MessageTag } from 'ontime-types';
 import { useShallow } from 'zustand/shallow';

@@ -1,5 +1,5 @@
 import { useCallback, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';

 import { addDialog } from '../stores/dialogStore';

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

 import {
  arePathsEquivalent,
@@ -1,4 +1,4 @@
-import { Path, resolvePath } from 'react-router-dom';
+import { Path, resolvePath } from 'react-router';
 import { OntimeView, URLPreset } from 'ontime-types';
 import { checkRegex } from 'ontime-utils';

@@ -1,6 +1,6 @@
 /* eslint-disable react/display-name */
 import { ComponentType, useEffect } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router';

 import useUrlPresets from '../common/hooks-query/useUrlPresets';
 import { getRouteFromPreset } from '../common/utils/urlPresets';
@@ -1,6 +1,6 @@
 import { ChangeEvent, useRef, useState } from 'react';
 import { IoAdd } from 'react-icons/io5';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router';

 import { uploadProjectFile } from '../../../../common/api/db';
 import { invalidateAllCaches, maybeAxiosError } from '../../../../common/api/utils';
@@ -1,5 +1,5 @@
 import { useCallback, useMemo } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router';

 import { SettingsOptionId } from './useAppSettingsMenu';

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router';
 import { CustomFields, OntimeEvent } from 'ontime-types';

 import { getTimeOption } from '../../common/components/view-params-editor/common.options';
@@ -1,6 +1,6 @@
 import React from 'react';
-import { createRoutesFromChildren, matchRoutes, useLocation, useNavigationType } from 'react-router-dom';
-import { Routes } from 'react-router-dom';
+import { createRoutesFromChildren, matchRoutes, useLocation, useNavigationType } from 'react-router';
+import { Routes } from 'react-router';
 import * as Sentry from '@sentry/react';

 import { ONTIME_VERSION } from './ONTIME_VERSION';
@@ -35,7 +35,7 @@ export const initializeSentry = () => {
  Sentry.init({
    dsn: sentryDsn,
    integrations: [
-      Sentry.reactRouterV6BrowserTracingIntegration({
+      Sentry.reactRouterV7BrowserTracingIntegration({
        useEffect: React.useEffect,
        useLocation,
        useNavigationType,
@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router';
 import { CustomFields, OntimeEvent, ProjectData } from 'ontime-types';

 import { getTimeOption } from '../../common/components/view-params-editor/common.options';
@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router';

 import { OptionTitle } from '../../../common/components/view-params-editor/constants';
 import { ViewOption } from '../../../common/components/view-params-editor/viewParams.types';
@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { IoArrowBack, IoClose, IoSaveOutline } from 'react-icons/io5';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 import { EntryId, OntimeEvent } from 'ontime-types';

 import Button from '../../common/components/buttons/Button';
@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router';
 import { CustomFields, EntryId, OntimeEvent } from 'ontime-types';

 import { getTimeOption } from '../../common/components/view-params-editor/common.options';
@@ -1,5 +1,5 @@
 import { IoClose } from 'react-icons/io5';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';

 import { loadDemo, loadProject } from '../../../common/api/db';
 import { postShowWelcomeDialog } from '../../../common/api/settings';
@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router';

 import { getTimeOption } from '../../common/components/view-params-editor/common.options';
 import { OptionTitle } from '../../common/components/view-params-editor/constants';
@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router';

 import { getTimeOption } from '../../common/components/view-params-editor/common.options';
 import { OptionTitle } from '../../common/components/view-params-editor/constants';
@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router';
 import { CustomFields, OntimeEvent, TimerType } from 'ontime-types';
 import { validateTimerType } from 'ontime-utils';

@@ -158,9 +158,9 @@ importers:
      react-qr-code:
        specifier: ^2.0.12
        version: 2.0.16(react@19.1.0)
-      react-router-dom:
-        specifier: ^6.3.0
-        version: 6.30.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      react-router:
+        specifier: ^7.7.0
+        version: 7.7.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
      react-simple-code-editor:
        specifier: ^0.14.1
        version: 0.14.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@@ -1331,10 +1331,6 @@ packages:
    engines: {node: '>=18'}
    hasBin: true

-  '@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==}

@@ -4148,18 +4144,15 @@ packages:
    resolution: {integrity: sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==}
    engines: {node: '>=0.10.0'}

-  react-router-dom@6.30.1:
-    resolution: {integrity: sha512-llKsgOkZdbPU1Eg3zK8lCn+sjD9wMRZZPuzmdWWX5SUs8OFkN5HnFVC0u5KMeMaC9aoancFI/KoLuKPqN+hxHw==}
-    engines: {node: '>=14.0.0'}
+  react-router@7.7.0:
+    resolution: {integrity: sha512-3FUYSwlvB/5wRJVTL/aavqHmfUKe0+Xm9MllkYgGo9eDwNdkvwlJGjpPxono1kCycLt6AnDTgjmXvK3/B4QGuw==}
+    engines: {node: '>=20.0.0'}
    peerDependencies:
-      react: '>=16.8'
-      react-dom: '>=16.8'
-
-  react-router@6.30.1:
-    resolution: {integrity: sha512-X1m21aEmxGXqENEPG3T6u0Th7g0aS4ZmoNynhbs+Cn+q+QGTLt+d5IQ2bHAXKzKcxGJjxACpVbnYQSCRcfxHlQ==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      react: '>=16.8'
+      react: '>=18'
+      react-dom: '>=18'
+    peerDependenciesMeta:
+      react-dom:
+        optional: true

  react-simple-code-editor@0.14.1:
    resolution: {integrity: sha512-BR5DtNRy+AswWJECyA17qhUDvrrCZ6zXOCfkQY5zSmb96BVUbpVAv03WpcjcwtCwiLbIANx3gebHOcXYn1EHow==}
@@ -4356,6 +4349,9 @@ packages:
  server-timing@3.3.3:
    resolution: {integrity: sha512-TP0xWAca4oM8H/PSdeaGgp2qm+HrZ2cWCRcMXS2t500a7Wum/hSojlpTW43VZsIUSVNlKPFGDknH34IqF+mbBg==}

+  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'}
@@ -6045,8 +6041,6 @@ snapshots:
    dependencies:
      playwright: 1.53.2

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

  '@rollup/pluginutils@5.1.4(rollup@4.41.1)':
@@ -9345,17 +9339,13 @@ snapshots:

  react-refresh@0.17.0: {}

-  react-router-dom@6.30.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
+  react-router@7.7.0(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-router: 6.30.1(react@19.1.0)
-
-  react-router@6.30.1(react@19.1.0):
-    dependencies:
-      '@remix-run/router': 1.23.0
-      react: 19.1.0

  react-simple-code-editor@0.14.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
    dependencies:
@@ -9621,6 +9611,8 @@ snapshots:
      minimist: 1.2.8
      on-headers: 1.0.2

+  set-cookie-parser@2.7.1: {}
+
  set-function-length@1.2.2:
    dependencies:
      define-data-property: 1.1.4