fix: migrate desktop routing to React Router 8.3.0 (#10971)

ui/desktop/package.json

@@ -65,7 +65,6 @@
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/themes": "^3.3.0",
     "@tanstack/react-form": "1.28.3",
-    "@types/react-router-dom": "^5.3.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "compare-versions": "^6.1.1",
@@ -82,12 +81,12 @@
     "katex": "^0.16.33",
     "lodash": "^4.17.23",
     "lucide-react": "^0.575.0",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
     "react-icons": "^5.5.0",
     "react-intl": "^10.1.0",
     "react-markdown": "^10.1.0",
-    "react-router-dom": "^7.18.2",
+    "react-router": "^8.3.0",
     "react-select": "^5.10.2",
     "react-syntax-highlighter": "^16.1.0",
     "react-toastify": "^11.0.5",

ui/desktop/src/App.test.tsx

@@ -137,8 +137,8 @@ const mockNavigate = vi.fn();
 const mockSearchParams = new URLSearchParams();
 const mockSetSearchParams = vi.fn();
 
-// Mock react-router-dom to avoid HashRouter issues in tests
-vi.mock('react-router-dom', () => ({
+// Mock react-router to avoid HashRouter issues in tests
+vi.mock('react-router', () => ({
   HashRouter: ({ children }: { children: React.ReactNode }) => <>{children}</>,
   Routes: ({ children }: { children: React.ReactNode }) => <>{children}</>,
   Route: ({ element }: { element: React.ReactNode }) => element,

ui/desktop/src/App.tsx

@@ -7,7 +7,7 @@ import {
   useNavigate,
   useLocation,
   useSearchParams,
-} from 'react-router-dom';
+} from 'react-router';
 import { importNostrSessionFromDeepLink } from './sessionLinks';
 import { ErrorUI } from './components/ErrorBoundary';
 import { ExtensionInstallModal } from './components/ExtensionInstallModal';

ui/desktop/src/components/BaseChat.tsx

@@ -1,7 +1,7 @@
 import { AppEvents } from '../constants/events';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { defineMessages, useIntl } from '../i18n';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router';
 import { SearchView } from './conversation/SearchView';
 import LoadingGoose from './LoadingGoose';
 import ProgressiveMessageList from './ProgressiveMessageList';

ui/desktop/src/components/ChatSessionsContainer.test.tsx

@@ -4,7 +4,7 @@ import ChatSessionsContainer from './ChatSessionsContainer';
 import { subscribeToAcpRecovery } from '../acp/acpConnection';
 import { acpChatSessionController } from '../acp/chatSessionController';
 
-vi.mock('react-router-dom', () => ({
+vi.mock('react-router', () => ({
   useSearchParams: () => [new URLSearchParams('resumeSessionId=session-1')],
 }));
 

ui/desktop/src/components/ChatSessionsContainer.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router';
 import BaseChat from './BaseChat';
 import { ChatType } from '../types/chat';
 import { UserInput } from '../types/message';

ui/desktop/src/components/Layout/AppLayout.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { IpcRendererEvent } from 'electron';
-import { Outlet, useLocation } from 'react-router-dom';
+import { Outlet, useLocation } from 'react-router';
 import { motion } from 'framer-motion';
 import { Menu, PanelLeft } from 'lucide-react';
 import { defineMessages, useIntl } from '../../i18n';

ui/desktop/src/components/Layout/NavigationPanel.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { ChevronDown, ChevronRight } from 'lucide-react';
 import { motion } from 'framer-motion';
 import { useNavigationContext } from './NavigationContext';

ui/desktop/src/components/__tests__/GroupedExtensionLoadingToast.test.tsx

@@ -1,6 +1,6 @@
 import { describe, it, expect } from 'vitest';
 import { render, screen } from '@testing-library/react';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter } from 'react-router';
 import { GroupedExtensionLoadingToast } from '../GroupedExtensionLoadingToast';
 import { IntlTestWrapper } from '../../i18n/test-utils';
 

ui/desktop/src/components/apps/StandaloneAppView.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router';
 import McpAppRenderer from '../McpApps/McpAppRenderer';
 import { listMcpApps } from '../../acp/mcp-apps';
 import { acpCloseSession, acpNewSession } from '../../acp/sessions';

ui/desktop/src/components/onboarding/OnboardingGuard.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 import { useConfig } from '../ConfigContext';
 import { useModelAndProvider } from '../ModelAndProviderContext';
 import { acpListProviderDetails, acpReadDefaults, acpSaveDefaults } from '../../acp/providers';

ui/desktop/src/components/schedule/SchedulesView.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import type { ScheduledJobDto } from '@aaif/goose-sdk';
 import {
   acpListSchedules,

ui/desktop/src/components/settings/providers/ProviderSettingsPage.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState, useCallback, useRef, useMemo } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 import { ScrollArea } from '../../ui/scroll-area';
 import BackButton from '../../ui/BackButton';
 import ProviderGrid from './ProviderGrid';

ui/desktop/src/hooks/useAnalytics.ts

@@ -12,7 +12,7 @@
  */
 
 import { useEffect, useRef } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { trackPageView } from '../utils/analytics';
 
 export function usePageViewTracking(): void {

ui/desktop/src/hooks/useAutoSubmit.test.tsx

@@ -1,6 +1,6 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { renderHook } from '@testing-library/react';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter } from 'react-router';
 import type { PropsWithChildren } from 'react';
 import { useAutoSubmit } from './useAutoSubmit';
 import { ChatState } from '../types/chatState';

ui/desktop/src/hooks/useAutoSubmit.ts

@@ -1,6 +1,6 @@
 import { AppEvents } from '../constants/events';
 import { useCallback, useEffect, useRef } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router';
 import { ChatState } from '../types/chatState';
 import type { Message, UserInput } from '../types/message';
 import type { Session } from '../types/session';

ui/desktop/src/hooks/useNavigation.ts

@@ -1,4 +1,4 @@
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 import { createNavigationHandler } from '../utils/navigationUtils';
 
 /**

ui/desktop/src/hooks/useNavigationSessions.ts

@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef, useCallback, useMemo } from 'react';
-import { useNavigate, useLocation, useSearchParams } from 'react-router-dom';
+import { useNavigate, useLocation, useSearchParams } from 'react-router';
 import { useChatContext } from '../contexts/ChatContext';
 import { getSessionDisplayName } from '../sessions';
 import { AppEvents } from '../constants/events';

ui/desktop/src/utils/navigationUtils.ts

@@ -1,4 +1,4 @@
-import { NavigateFunction } from 'react-router-dom';
+import type { NavigateFunction } from 'react-router';
 import type { Recipe } from '../recipe';
 import { UserInput } from '../types/message';
 

ui/pnpm-workspace.yaml

@@ -10,8 +10,8 @@ supportedArchitectures:
   os: [current, linux, darwin, win32]
   cpu: [current, x64, arm64]
 overrides:
-  react: ^19.2.4
-  react-dom: ^19.2.4
+  react: ^19.2.8
+  react-dom: ^19.2.8
 allowBuilds:
   '@modelcontextprotocol/ext-apps': true
   electron: true