@lobehub/lobehub 2.0.0-next.71 → 2.0.0-next.73

package/src/features/User/UserPanel/useMenu.tsx

@@ -15,9 +15,9 @@ import {
   Mail,
   Settings2,
 } from 'lucide-react';
-import Link from 'next/link';
 import { PropsWithChildren, memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
 import { Flexbox } from 'react-layout-kit';
 
 import type { MenuProps } from '@/components/Menu';
@@ -77,7 +77,7 @@ export const useMenu = () => {
     {
       icon: <Icon icon={CircleUserRound} />,
       key: 'profile',
-      label: <Link href={'/profile'}>{t('userPanel.profile')}</Link>,
+      label: <Link to="/profile">{t('userPanel.profile')}</Link>,
     },
   ];
 
@@ -91,7 +91,7 @@ export const useMenu = () => {
       icon: <Icon icon={Settings2} />,
       key: 'setting',
       label: (
-        <Link href={'/settings'}>
+        <Link to="/settings">
           <NewVersionBadge showBadge={hasNewVersion}>{t('userPanel.setting')}</NewVersionBadge>
         </Link>
       ),
@@ -135,15 +135,21 @@ export const useMenu = () => {
       icon: <Icon icon={Cloudy} />,
       key: 'cloud',
       label: (
-        <Link href={`${OFFICIAL_URL}?utm_source=${UTM_SOURCE}`} target={'_blank'}>
+        <a href={`${OFFICIAL_URL}?utm_source=${UTM_SOURCE}`} rel="noopener noreferrer" target="_blank">
           {t('userPanel.cloud', { name: LOBE_CHAT_CLOUD })}
-        </Link>
+        </a>
       ),
     },
     {
       icon: <Icon icon={FileClockIcon} />,
       key: 'changelog',
-      label: <Link href={isDesktop ? CHANGELOG : '/changelog/modal'}>{t('changelog')}</Link>,
+      label: isDesktop ? (
+        <a href={CHANGELOG} rel="noopener noreferrer" target="_blank">
+          {t('changelog')}
+        </a>
+      ) : (
+        <Link to="/changelog/modal">{t('changelog')}</Link>
+      ),
     },
     {
       children: [
@@ -151,36 +157,36 @@ export const useMenu = () => {
           icon: <Icon icon={Book} />,
           key: 'docs',
           label: (
-            <Link href={DOCUMENTS_REFER_URL} target={'_blank'}>
+            <a href={DOCUMENTS_REFER_URL} rel="noopener noreferrer" target="_blank">
               {t('userPanel.docs')}
-            </Link>
+            </a>
           ),
         },
         {
           icon: <Icon icon={Feather} />,
           key: 'feedback',
           label: (
-            <Link href={GITHUB_ISSUES} target={'_blank'}>
+            <a href={GITHUB_ISSUES} rel="noopener noreferrer" target="_blank">
               {t('userPanel.feedback')}
-            </Link>
+            </a>
           ),
         },
         {
           icon: <Icon icon={DiscordIcon} />,
           key: 'discord',
           label: (
-            <Link href={SOCIAL_URL.discord} target={'_blank'}>
+            <a href={SOCIAL_URL.discord} rel="noopener noreferrer" target="_blank">
               {t('userPanel.discord')}
-            </Link>
+            </a>
           ),
         },
         {
           icon: <Icon icon={Mail} />,
           key: 'email',
           label: (
-            <Link href={mailTo(BRANDING_EMAIL.support)} target={'_blank'}>
+            <a href={mailTo(BRANDING_EMAIL.support)} rel="noopener noreferrer" target="_blank">
               {t('userPanel.email')}
-            </Link>
+            </a>
           ),
         },
       ],

package/src/features/User/__tests__/PanelContent.test.tsx

@@ -1,4 +1,5 @@
 import { act, render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
 import { afterEach, describe, expect, it, vi } from 'vitest';
 
 import { useUserStore } from '@/store/user';
@@ -79,13 +80,18 @@ vi.mock('@/const/auth', () => ({
 describe('PanelContent', () => {
   const closePopover = vi.fn();
 
+  // Helper function to render component with Router provider
+  const renderWithRouter = (ui: React.ReactElement) => {
+    return render(<MemoryRouter>{ui}</MemoryRouter>);
+  };
+
   describe('enable auth', () => {
     it('should render UserInfo when user is signed in', () => {
       act(() => {
         useUserStore.setState({ isSignedIn: true });
       });
 
-      render(<PanelContent closePopover={closePopover} />);
+      renderWithRouter(<PanelContent closePopover={closePopover} />);
 
       expect(screen.getByText('Mocked UserInfo')).toBeInTheDocument();
       expect(screen.getByText('Mocked DataStatistics')).toBeInTheDocument();
@@ -97,7 +103,7 @@ describe('PanelContent', () => {
         useUserStore.setState({ isSignedIn: false });
       });
 
-      render(<PanelContent closePopover={closePopover} />);
+      renderWithRouter(<PanelContent closePopover={closePopover} />);
 
       expect(screen.getByText('Mocked SignInBlock')).toBeInTheDocument();
       expect(screen.queryByText('Mocked DataStatistics')).not.toBeInTheDocument();
@@ -109,7 +115,7 @@ describe('PanelContent', () => {
         useUserStore.setState({ isSignedIn: true });
       });
 
-      render(<PanelContent closePopover={closePopover} />);
+      renderWithRouter(<PanelContent closePopover={closePopover} />);
 
       expect(screen.getAllByText('Mocked Menu').length).toBe(2);
     });
@@ -119,7 +125,7 @@ describe('PanelContent', () => {
         useUserStore.setState({ isSignedIn: false });
       });
 
-      render(<PanelContent closePopover={closePopover} />);
+      renderWithRouter(<PanelContent closePopover={closePopover} />);
 
       expect(screen.getByText('Mocked BrandWatermark')).toBeInTheDocument();
     });
@@ -131,7 +137,7 @@ describe('PanelContent', () => {
         useUserStore.setState({ isSignedIn: true });
       });
 
-      render(<PanelContent closePopover={closePopover} />);
+      renderWithRouter(<PanelContent closePopover={closePopover} />);
 
       expect(screen.getByText('Mocked UserInfo')).toBeInTheDocument();
       expect(screen.getByText('Mocked DataStatistics')).toBeInTheDocument();
@@ -145,14 +151,14 @@ describe('PanelContent', () => {
         useUserStore.setState({ isSignedIn: false });
       });
 
-      render(<PanelContent closePopover={closePopover} />);
+      renderWithRouter(<PanelContent closePopover={closePopover} />);
 
       expect(screen.getByText('Mocked BrandWatermark')).toBeInTheDocument();
     });
   });
 
   it('should render Menu with main items', () => {
-    render(<PanelContent closePopover={closePopover} />);
+    renderWithRouter(<PanelContent closePopover={closePopover} />);
 
     expect(screen.getByText('Mocked Menu')).toBeInTheDocument();
   });

package/src/hooks/useDiscoverTab.ts

@@ -1,7 +1,7 @@
-import { useQueryState } from 'nuqs';
-
 import { DiscoverTab } from '@/types/discover';
 
+import { useQueryState } from './useQueryParam';
+
 export const useDiscoverTab = () => {
   const [type] = useQueryState('type', {
     clearOnDefault: true,

package/src/hooks/useInterceptingRoutes.test.ts

@@ -1,35 +1,20 @@
 import { act, renderHook } from '@testing-library/react';
-import { describe, expect, it, vi } from 'vitest';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { INBOX_SESSION_ID } from '@/const/session';
 import { useIsMobile } from '@/hooks/useIsMobile';
 import { useAgentStore } from '@/store/agent';
-import { ChatSettingsTabs } from '@/store/global/initialState';
+import { ChatSettingsTabs, SettingsTabs } from '@/store/global/initialState';
 import { useSessionStore } from '@/store/session';
 
 import { useOpenChatSettings } from './useInterceptingRoutes';
 
-// Mocks
-const mockPush = vi.fn((href) => href);
-vi.mock('next/navigation', () => ({
-  useRouter: vi.fn(() => ({
-    push: mockPush,
-    replace: vi.fn((href) => href),
-  })),
-}));
-vi.mock('nextjs-toploader/app', () => ({
-  useRouter: vi.fn(() => ({
-    push: mockPush,
-    replace: vi.fn((href) => href),
-  })),
-}));
-vi.mock('@/hooks/useQuery', () => ({
-  useQuery: vi.fn(() => ({})),
-}));
-vi.mock('@/hooks/useQueryRoute', () => ({
-  useQueryRoute: vi.fn(() => ({
-    push: mockPush,
-  })),
+const mockNavigate = vi.fn();
+const mockUseNavigate = vi.fn(() => mockNavigate);
+const mockUseLocation = vi.fn(() => ({ pathname: '/' }));
+vi.mock('react-router-dom', () => ({
+  useNavigate: () => mockUseNavigate(),
+  useLocation: () => mockUseLocation(),
 }));
 vi.mock('@/hooks/useIsMobile', () => ({
   useIsMobile: vi.fn(),
@@ -43,15 +28,26 @@ vi.mock('@/store/global', () => ({
   },
 }));
 describe('useOpenChatSettings', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    useAgentStore.setState({ showAgentSetting: false });
+  });
 
-  it('should handle mobile route for chat settings', () => {
+  it('navigates to mobile chat settings with session info', () => {
     vi.mocked(useSessionStore).mockReturnValue('123');
     vi.mocked(useIsMobile).mockReturnValue(true);
     const { result } = renderHook(() => useOpenChatSettings(ChatSettingsTabs.Meta));
-    expect(result.current()).toBe('/chat/settings');
+
+    act(() => {
+      result.current();
+    });
+
+    expect(mockNavigate).toHaveBeenCalledWith(
+      `/chat/settings?session=123&showMobileWorkspace=true`,
+    );
   });
 
-  it('should handle desktop route for chat settings with session and tab', () => {
+  it('opens desktop agent settings overlay when not on mobile', () => {
     vi.mocked(useSessionStore).mockReturnValue('456');
     vi.mocked(useIsMobile).mockReturnValue(false);
 
@@ -62,5 +58,6 @@ describe('useOpenChatSettings', () => {
     });
 
     expect(useAgentStore.getState().showAgentSetting).toBeTruthy();
+    expect(mockNavigate).not.toHaveBeenCalled();
   });
 });

package/src/hooks/useInterceptingRoutes.ts

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
 
 import { useIsMobile } from '@/hooks/useIsMobile';
-import { useQueryRoute } from '@/hooks/useQueryRoute';
 import { useAgentStore } from '@/store/agent';
 import { ChatSettingsTabs } from '@/store/global/initialState';
 import { useSessionStore } from '@/store/session';
@@ -10,13 +10,14 @@ export const useOpenChatSettings = (tab: ChatSettingsTabs = ChatSettingsTabs.Met
   const activeId = useSessionStore((s) => s.activeId);
 
   const isMobile = useIsMobile();
-  const router = useQueryRoute();
+  const navigate = useNavigate();
+  const location = useLocation();
 
   return useMemo(() => {
-    if (isMobile) return () => router.push('/chat/settings', { query: { session: activeId } });
+    if (isMobile) return () => navigate(`/chat/settings?session=${activeId}&showMobileWorkspace=true`);
 
     return () => {
       useAgentStore.setState({ showAgentSetting: true });
     };
-  }, [activeId, router, tab, isMobile]);
+  }, [activeId, navigate, location.pathname, tab, isMobile]);
 };

package/src/hooks/usePinnedAgentState.ts

@@ -1,11 +1,11 @@
-import { parseAsBoolean, useQueryState } from 'nuqs';
 import { useMemo } from 'react';
 
+import { parseAsBoolean, useQueryParam } from './useQueryParam';
+
 export const usePinnedAgentState = () => {
-  const [isPinned, setIsPinned] = useQueryState(
-    'pinned',
-    parseAsBoolean.withDefault(false).withOptions({ clearOnDefault: true }),
-  );
+  const [isPinned, setIsPinned] = useQueryParam('pinned', parseAsBoolean.withDefault(false), {
+    clearOnDefault: true,
+  });
 
   const actions = useMemo(
     () => ({
@@ -14,7 +14,7 @@ export const usePinnedAgentState = () => {
       togglePinAgent: () => setIsPinned((prev) => !prev),
       unpinAgent: () => setIsPinned(false),
     }),
-    [],
+    [setIsPinned],
   );
 
   return [isPinned, actions] as const;

package/src/hooks/useQuery.ts

@@ -2,6 +2,11 @@ import { useSearchParams } from 'next/navigation';
 import qs from 'query-string';
 import { useMemo } from 'react';
 
+/**
+ * Hook to get query parameters
+ * This is the Next.js version
+ * For React Router version, use useQuery from @/app/[variants]/(main)/hooks/useQuery
+ */
 export const useQuery = () => {
   const rawQuery = useSearchParams();
   return useMemo(() => qs.parse(rawQuery.toString()), [rawQuery]);

package/src/hooks/useQueryParam.ts

@@ -0,0 +1,322 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { useSearchParams } from 'react-router-dom';
+
+type HistoryMode = 'push' | 'replace';
+
+// options 接口，用于 useQueryParam hook
+interface QueryParamOptions<T> {
+  clearOnDefault?: boolean;
+  defaultValue?: T;
+  history?: HistoryMode;
+  throttleMs?: number;
+}
+
+// 解析器接口
+interface Parser<T> {
+  parse: (value: string | null) => T;
+  serialize: (value: T) => string | null;
+}
+
+// 带默认值的解析器接口
+interface ParserWithDefault<T> extends Parser<T> {
+  // nuqs has an optional default value on parsers
+  defaultValue?: T;
+  parse: (value: string | null) => T;
+}
+
+/**
+ * 核心钩子，用于管理单个查询参数
+ * 为 react-router-dom 替换 nuqs 的 useQueryState 功能
+ */
+export function useQueryParam<T>(
+  key: string,
+  parser: Parser<T> | ParserWithDefault<T>,
+  options: QueryParamOptions<T> = {},
+): [T, (value: T | ((prev: T) => T)) => void] {
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  // 从 options 或 parser 本身提取 defaultValue
+  const {
+    clearOnDefault = false,
+    defaultValue = (parser as ParserWithDefault<T>)?.defaultValue,
+    history = 'push',
+    throttleMs = 0,
+  } = options;
+
+  // eslint-disable-next-line no-undef
+  const throttleTimer = useRef<NodeJS.Timeout | null>(null);
+  const lastExecuteTime = useRef<number>(0);
+
+  // 使用 ref 存储最新的值，让 setValue 保持稳定
+  const searchParamsRef = useRef(searchParams);
+  const parserRef = useRef(parser);
+  const defaultValueRef = useRef(defaultValue);
+  const clearOnDefaultRef = useRef(clearOnDefault);
+  const historyRef = useRef(history);
+
+  // 每次渲染时更新 ref
+  useEffect(() => {
+    searchParamsRef.current = searchParams;
+    parserRef.current = parser;
+    defaultValueRef.current = defaultValue;
+    clearOnDefaultRef.current = clearOnDefault;
+    historyRef.current = history;
+  });
+
+  // 从 URL 解析当前值
+  const currentValue = parser.parse(searchParams.get(key));
+  const value = currentValue ?? (defaultValue as T);
+
+  // setValue 现在是稳定的，不会因为 searchParams 变化而重新创建
+  const setValue = useCallback(
+    (newValue: T | ((prev: T) => T)) => {
+      // 从 ref 读取最新值，避免闭包陈旧值问题
+      const currentSearchParams = searchParamsRef.current;
+      const currentParser = parserRef.current;
+      const currentDefaultValue = defaultValueRef.current;
+      const currentClearOnDefault = clearOnDefaultRef.current;
+      const currentHistory = historyRef.current;
+
+      // 通过函数形式获取最新值
+      const currentVal =
+        currentParser.parse(currentSearchParams.get(key)) ?? (currentDefaultValue as T);
+      const actualValue =
+        typeof newValue === 'function' ? (newValue as (prev: T) => T)(currentVal) : newValue;
+
+      const updateParams = () => {
+        // 使用函数式更新，确保基于最新的 searchParams
+        setSearchParams((prevParams) => {
+          const newSearchParams = new URLSearchParams(prevParams);
+          console.log('updateParams', newSearchParams.toString());
+          const serialized = currentParser.serialize(actualValue);
+
+          // 处理 clearOnDefault 选项
+          if (
+            currentClearOnDefault &&
+            currentDefaultValue !== undefined &&
+            serialized === currentParser.serialize(currentDefaultValue as T)
+          ) {
+            newSearchParams.delete(key);
+          } else if (serialized === null || serialized === undefined) {
+            newSearchParams.delete(key);
+          } else {
+            newSearchParams.set(key, serialized);
+          }
+
+          console.log('updateParams', newSearchParams.toString());
+
+          return newSearchParams;
+        }, { replace: currentHistory === 'replace' });
+      };
+
+      // 处理节流
+      if (throttleMs > 0) {
+        const now = Date.now();
+        const timeSinceLastExecute = now - lastExecuteTime.current;
+
+        if (timeSinceLastExecute >= throttleMs) {
+          // 距离上次执行已超过节流时间，立即执行
+          lastExecuteTime.current = now;
+          updateParams();
+          // 清理可能存在的定时器
+          if (throttleTimer.current) {
+            clearTimeout(throttleTimer.current);
+            throttleTimer.current = null;
+          }
+        } else {
+          // 还在节流期内，设置定时器在剩余时间后执行最后一次
+          if (throttleTimer.current) {
+            clearTimeout(throttleTimer.current);
+          }
+          const remainingTime = throttleMs - timeSinceLastExecute;
+          throttleTimer.current = setTimeout(() => {
+            lastExecuteTime.current = Date.now();
+            updateParams();
+            throttleTimer.current = null;
+          }, remainingTime);
+        }
+      } else {
+        updateParams();
+      }
+    },
+    [key, setSearchParams, throttleMs], // 只依赖不会频繁变化的值
+  );
+
+  // 组件卸载时清理节流计时器
+  useEffect(() => {
+    return () => {
+      if (throttleTimer.current) {
+        clearTimeout(throttleTimer.current);
+      }
+    };
+  }, []);
+
+  return [value, setValue];
+}
+
+// ===== 解析器 (Parsers) =====
+
+/**
+ * 字符串解析器 - 默认行为
+ */
+export const parseAsString: Parser<string | null> & {
+  withDefault: (defaultValue: string) => ParserWithDefault<string>;
+} = {
+  parse: (value: string | null) => value,
+  serialize: (value: string | null) => value,
+  withDefault: (defaultValue: string) => ({
+    defaultValue,
+    parse: (value: string | null) => value ?? defaultValue,
+    serialize: (value: string) => value,
+  }),
+};
+
+/**
+ * 布尔值解析器
+ */
+export const parseAsBoolean: Parser<boolean | null> & {
+  withDefault: (defaultValue: boolean) => ParserWithDefault<boolean>;
+} = {
+  parse: (value: string | null) => {
+    if (value === null) return null;
+    return value === 'true' || value === '1';
+  },
+  serialize: (value: boolean | null) => {
+    if (value === null) return null;
+    return value ? 'true' : 'false';
+  },
+  withDefault: (defaultValue: boolean) => ({
+    defaultValue,
+    parse: (value: string | null) => {
+      if (value === null) return defaultValue;
+      return value === 'true' || value === '1';
+    },
+    serialize: (value: boolean) => (value ? 'true' : 'false'),
+  }),
+};
+
+/**
+ * 整数解析器
+ */
+export const parseAsInteger: Parser<number | null> & {
+  withDefault: (defaultValue: number) => ParserWithDefault<number>;
+} = {
+  parse: (value: string | null) => {
+    if (value === null) return null;
+    const parsed = Number.parseInt(value, 10);
+    return Number.isNaN(parsed) ? null : parsed;
+  },
+  serialize: (value: number | null) => {
+    if (value === null) return null;
+    return value.toString();
+  },
+  withDefault: (defaultValue: number) => ({
+    defaultValue,
+    parse: (value: string | null) => {
+      if (value === null) return defaultValue;
+      const parsed = Number.parseInt(value, 10);
+      return Number.isNaN(parsed) ? defaultValue : parsed;
+    },
+    serialize: (value: number) => value.toString(),
+  }),
+};
+
+/**
+ * 字符串枚举解析器
+ */
+export function parseAsStringEnum<T extends string>(validValues: readonly T[]) {
+  const parser: Parser<T | null> = {
+    parse: (value: string | null): T | null => {
+      if (value === null) return null;
+      return validValues.includes(value as T) ? (value as T) : null;
+    },
+    serialize: (value: T | null) => value,
+  };
+
+  const withDefault = (defaultValue: T): ParserWithDefault<T> => ({
+    defaultValue,
+    parse: (value: string | null): T => {
+      if (value === null) return defaultValue;
+      return validValues.includes(value as T) ? (value as T) : defaultValue;
+    },
+    serialize: (value: T) => value,
+  });
+
+  return Object.assign(parser, { withDefault });
+}
+
+// ===== 简化的 API (Simplified API) =====
+
+// --- 重载签名 ---
+
+// 字符串 (无解析器或仅有 options)
+export function useQueryState(
+  key: string,
+  options?: QueryParamOptions<string | null>,
+): [string | null, (value: string | null | ((prev: string | null) => string | null)) => void];
+
+// 带默认值的字符串解析器
+// eslint-disable-next-line no-redeclare
+export function useQueryState(
+  key: string,
+  parserWithDefault: ParserWithDefault<string>,
+): [string, (value: string | ((prev: string) => string)) => void];
+
+// 布尔值解析器
+// eslint-disable-next-line no-redeclare
+export function useQueryState(
+  key: string,
+  parser: typeof parseAsBoolean,
+): [boolean | null, (value: boolean | null | ((prev: boolean | null) => boolean | null)) => void];
+
+// 带默认值的布尔值解析器
+// eslint-disable-next-line no-redeclare
+export function useQueryState(
+  key: string,
+  parserWithDefault: ParserWithDefault<boolean>,
+): [boolean, (value: boolean | ((prev: boolean) => boolean)) => void];
+
+// 整数解析器
+// eslint-disable-next-line no-redeclare
+export function useQueryState(
+  key: string,
+  parser: typeof parseAsInteger,
+): [number | null, (value: number | null | ((prev: number | null) => number | null)) => void];
+
+// 带默认值的整数解析器
+// eslint-disable-next-line no-redeclare
+export function useQueryState(
+  key: string,
+  parserWithDefault: ParserWithDefault<number>,
+): [number, (value: number | ((prev: number) => number)) => void];
+
+// 带默认值的字符串枚举解析器
+// eslint-disable-next-line no-redeclare
+export function useQueryState<T extends string>(
+  key: string,
+  parserWithDefault: ParserWithDefault<T>,
+): [T, (value: T | ((prev: T) => T)) => void];
+
+// --- 单一实现 ---
+// eslint-disable-next-line no-redeclare
+export function useQueryState(key: string, parserOrOptions?: any): any {
+  // 修复了逻辑分派问题
+  let parser: Parser<any>;
+  let options: QueryParamOptions<any> = {};
+
+  if (!parserOrOptions) {
+    // 场景 1: useQueryState('key')
+    parser = parseAsString;
+  } else if (typeof parserOrOptions.parse === 'function') {
+    // 场景 2: useQueryState('key', parseAsInteger) 或 useQueryState('key', parseAsInteger.withDefault(10))
+    parser = parserOrOptions;
+    // 从解析器自身提取 options (例如 defaultValue)
+    options = parserOrOptions;
+  } else {
+    // 场景 3: useQueryState('key', { defaultValue: 'foo', throttleMs: 500 })
+    parser = parseAsString;
+    options = parserOrOptions;
+  }
+
+  return useQueryParam(key, parser, options);
+}

package/src/hooks/useQueryRoute.test.ts

@@ -4,18 +4,8 @@ import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { useQueryRoute } from './useQueryRoute';
 
 // Mocks
-vi.mock('next/navigation', () => ({
-  useRouter: vi.fn(() => ({
-    push: vi.fn((href) => href),
-    replace: vi.fn((href) => href),
-  })),
-}));
-
-vi.mock('nextjs-toploader/app', () => ({
-  useRouter: vi.fn(() => ({
-    push: vi.fn((href) => href),
-    replace: vi.fn((href) => href),
-  })),
+vi.mock('react-router-dom', () => ({
+  useNavigate: vi.fn(() => vi.fn((href) => href)),
 }));
 
 vi.mock('@/utils/env', () => ({