feat(core): upgrade react-router from v6 to v7

packages/frontend/admin/package.json

@@ -51,7 +51,7 @@
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.54.1",
     "react-resizable-panels": "^3.0.0",
-    "react-router-dom": "^7.5.1",
+    "react-router": "^7.6.0",
     "sonner": "^2.0.0",
     "swr": "^2.2.5",
     "vaul": "^1.1.1",

packages/frontend/admin/src/app.tsx

@@ -1,5 +1,5 @@
 import { Toaster } from '@affine/admin/components/ui/sonner';
-import { lazy, ROUTES } from '@affine/routes';
+import { FACTORIES, lazy, RELATIVE_ROUTES } from '@affine/routes';
 import { withSentryReactRouterV7Routing } from '@sentry/react';
 import { useEffect } from 'react';
 import {
@@ -9,7 +9,7 @@ import {
   Route,
   Routes as ReactRouterRoutes,
   useLocation,
-} from 'react-router-dom';
+} from 'react-router';
 import { toast } from 'sonner';
 import { SWRConfig } from 'swr';
 
@@ -18,22 +18,24 @@ import { isAdmin, useCurrentUser, useServerConfig } from './modules/common';
 import { Layout } from './modules/layout';
 
 export const Setup = lazy(
-  () => import(/* webpackChunkName: "setup" */ './modules/setup')
+  async () => await import(/* webpackChunkName: "setup" */ './modules/setup')
 );
 export const Accounts = lazy(
-  () => import(/* webpackChunkName: "accounts" */ './modules/accounts')
+  async () =>
+    await import(/* webpackChunkName: "accounts" */ './modules/accounts')
 );
 export const AI = lazy(
-  () => import(/* webpackChunkName: "ai" */ './modules/ai')
+  async () => await import(/* webpackChunkName: "ai" */ './modules/ai')
 );
 export const About = lazy(
-  () => import(/* webpackChunkName: "about" */ './modules/about')
+  async () => await import(/* webpackChunkName: "about" */ './modules/about')
 );
 export const Settings = lazy(
-  () => import(/* webpackChunkName: "settings" */ './modules/settings')
+  async () =>
+    await import(/* webpackChunkName: "settings" */ './modules/settings')
 );
 export const Auth = lazy(
-  () => import(/* webpackChunkName: "auth" */ './modules/auth')
+  async () => await import(/* webpackChunkName: "auth" */ './modules/auth')
 );
 
 const Routes = window.SENTRY_RELEASE
@@ -50,7 +52,7 @@ function AuthenticatedRoutes() {
   }, [user]);
 
   if (!user || !isAdmin(user)) {
-    return <Navigate to="/admin/auth" />;
+    return <Navigate to={FACTORIES.admin.auth()} />;
   }
 
   return (
@@ -86,19 +88,21 @@ export const App = () => {
       >
         <BrowserRouter basename={environment.subPath}>
           <Routes>
-            <Route path={ROUTES.admin.index} element={<RootRoutes />}>
-              <Route path={ROUTES.admin.auth} element={<Auth />} />
-              <Route path={ROUTES.admin.setup} element={<Setup />} />
+            <Route path={RELATIVE_ROUTES.admin.index}>
+              <Route index element={<RootRoutes />} />
+              <Route path={RELATIVE_ROUTES.admin.auth} element={<Auth />} />
+              <Route path={RELATIVE_ROUTES.admin.setup} element={<Setup />} />
               <Route element={<AuthenticatedRoutes />}>
-                <Route path={ROUTES.admin.accounts} element={<Accounts />} />
-                <Route path={ROUTES.admin.ai} element={<AI />} />
-                <Route path={ROUTES.admin.about} element={<About />} />
                 <Route
-                  path={ROUTES.admin.settings.index}
-                  element={<Settings />}
-                >
+                  path={RELATIVE_ROUTES.admin.accounts}
+                  element={<Accounts />}
+                />
+                <Route path={RELATIVE_ROUTES.admin.ai} element={<AI />} />
+                <Route path={RELATIVE_ROUTES.admin.about} element={<About />} />
+                <Route path={RELATIVE_ROUTES.admin.settings.index}>
+                  <Route index element={<Settings />} />
                   <Route
-                    path={ROUTES.admin.settings.module}
+                    path={RELATIVE_ROUTES.admin.settings.module}
                     element={<Settings />}
                   />
                 </Route>

packages/frontend/admin/src/modules/auth/index.tsx

@@ -4,7 +4,7 @@ import { Label } from '@affine/admin/components/ui/label';
 import { FeatureType, getUserFeaturesQuery } from '@affine/graphql';
 import type { FormEvent } from 'react';
 import { useCallback, useRef } from 'react';
-import { Navigate } from 'react-router-dom';
+import { Navigate } from 'react-router';
 import { toast } from 'sonner';
 
 import { affineFetch } from '../../fetch-utils';

packages/frontend/admin/src/modules/nav/collapsible-item.tsx

@@ -1,5 +1,5 @@
 import { useCallback } from 'react';
-import { NavLink } from 'react-router-dom';
+import { NavLink } from 'react-router';
 
 import { buttonVariants } from '../../components/ui/button';
 import { cn } from '../../utils';

packages/frontend/admin/src/modules/nav/nav-item.tsx

@@ -1,7 +1,7 @@
 import { buttonVariants } from '@affine/admin/components/ui/button';
 import { cn } from '@affine/admin/utils';
 import { cssVarV2 } from '@toeverything/theme/v2';
-import { NavLink } from 'react-router-dom';
+import { NavLink } from 'react-router';
 
 interface NavItemProps {
   icon: React.ReactNode;

packages/frontend/admin/src/modules/nav/nav.tsx

@@ -2,7 +2,7 @@ import { buttonVariants } from '@affine/admin/components/ui/button';
 import { cn } from '@affine/admin/utils';
 import { AccountIcon, AiOutlineIcon, SelfhostIcon } from '@blocksuite/icons/rc';
 import { cssVarV2 } from '@toeverything/theme/v2';
-import { NavLink } from 'react-router-dom';
+import { NavLink } from 'react-router';
 
 import { ServerVersion } from './server-version';
 import { SettingsItem } from './settings-item';

packages/frontend/admin/src/modules/nav/settings-item.tsx

@@ -10,7 +10,7 @@ import { SettingsIcon } from '@blocksuite/icons/rc';
 import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import { cssVarV2 } from '@toeverything/theme/v2';
-import { NavLink } from 'react-router-dom';
+import { NavLink } from 'react-router';
 
 import { KNOWN_CONFIG_GROUPS, UNKNOWN_CONFIG_GROUPS } from '../settings/config';
 import { NormalSubItem } from './collapsible-item';

packages/frontend/admin/src/modules/setup/form.tsx

@@ -8,7 +8,7 @@ import {
 import { validateEmailAndPassword } from '@affine/admin/utils';
 import { useAsyncCallback } from '@affine/core/components/hooks/affine-async-hooks';
 import { useCallback, useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 import { toast } from 'sonner';
 
 import { affineFetch } from '../../fetch-utils';
@@ -149,7 +149,7 @@ export const Form = () => {
     }
 
     if (current === count) {
-      return navigate('/', { replace: true });
+      return await navigate('/', { replace: true });
     }
 
     api?.scrollNext();
@@ -168,7 +168,7 @@ export const Form = () => {
   const onPrevious = useAsyncCallback(async () => {
     if (current === count) {
       if (serverConfig.initialized === true) {
-        return navigate('/admin', { replace: true });
+        return await navigate('/admin', { replace: true });
       }
       toast.error('Goto Admin Panel failed, please try again.');
       return;

packages/frontend/admin/src/modules/setup/index.tsx

@@ -1,4 +1,4 @@
-import { Navigate } from 'react-router-dom';
+import { Navigate } from 'react-router';
 
 import { useServerConfig } from '../common';
 import { Form } from './form';

packages/frontend/apps/android/package.json

@@ -31,7 +31,7 @@
     "next-themes": "^0.4.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-router-dom": "^6.28.0"
+    "react-router": "^7.6.0"
   },
   "devDependencies": {
     "@capacitor/cli": "^7.0.0",

packages/frontend/apps/android/src/app.tsx

@@ -1,6 +1,5 @@
 import { getStoreManager } from '@affine/core/blocksuite/manager/store';
 import { AffineContext } from '@affine/core/components/context';
-import { AppFallback } from '@affine/core/mobile/components/app-fallback';
 import { configureMobileModules } from '@affine/core/mobile/modules';
 import { VirtualKeyboardProvider } from '@affine/core/mobile/modules/virtual-keyboard';
 import { router } from '@affine/core/mobile/router';
@@ -46,7 +45,7 @@ import { OpClient } from '@toeverything/infra/op';
 import { AsyncCall } from 'async-call-rpc';
 import { useTheme } from 'next-themes';
 import { Suspense, useEffect } from 'react';
-import { RouterProvider } from 'react-router-dom';
+import { RouterProvider } from 'react-router/dom';
 
 import { AffineTheme } from './plugins/affine-theme';
 import { AIButton } from './plugins/ai-button';
@@ -60,10 +59,6 @@ window.addEventListener('beforeunload', () => {
   storeManagerClient.dispose();
 });
 
-const future = {
-  v7_startTransition: true,
-} as const;
-
 const framework = new Framework();
 configureCommonModules(framework);
 configureBrowserWorkbenchModule(framework);
@@ -342,11 +337,7 @@ export function App() {
         <I18nProvider>
           <AffineContext store={getCurrentStore()}>
             <ThemeProvider />
-            <RouterProvider
-              fallbackElement={<AppFallback />}
-              router={router}
-              future={future}
-            />
+            <RouterProvider router={router} />
           </AffineContext>
         </I18nProvider>
       </FrameworkRoot>

packages/frontend/apps/electron-renderer/package.json

@@ -25,7 +25,7 @@
     "next-themes": "^0.4.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-router-dom": "^6.28.0",
+    "react-router": "^7.6.0",
     "uuid": "^11.0.3",
     "webm-muxer": "^5.0.3"
   },

packages/frontend/apps/electron-renderer/src/app/app.tsx

@@ -1,13 +1,12 @@
 import { AffineContext } from '@affine/core/components/context';
 import { WindowsAppControls } from '@affine/core/components/pure/header/windows-app-controls';
-import { AppContainer } from '@affine/core/desktop/components/app-container';
 import { router } from '@affine/core/desktop/router';
 import { I18nProvider } from '@affine/core/modules/i18n';
 import createEmotionCache from '@affine/core/utils/create-emotion-cache';
 import { CacheProvider } from '@emotion/react';
 import { FrameworkRoot, getCurrentStore } from '@toeverything/infra';
 import { Suspense } from 'react';
-import { RouterProvider } from 'react-router-dom';
+import { RouterProvider } from 'react-router/dom';
 
 import { setupEffects } from './effects';
 import { DesktopThemeSync } from './theme-sync';
@@ -34,10 +33,6 @@ if (
 
 const cache = createEmotionCache();
 
-const future = {
-  v7_startTransition: true,
-} as const;
-
 export function App() {
   return (
     <Suspense>
@@ -46,11 +41,7 @@ export function App() {
           <I18nProvider>
             <AffineContext store={getCurrentStore()}>
               <DesktopThemeSync />
-              <RouterProvider
-                fallbackElement={<AppContainer fallback />}
-                router={router}
-                future={future}
-              />
+              <RouterProvider router={router} />
               {environment.isWindows && (
                 <div style={{ position: 'fixed', right: 0, top: 0, zIndex: 5 }}>
                   <WindowsAppControls />

packages/frontend/apps/ios/package.json

@@ -35,7 +35,7 @@
     "next-themes": "^0.4.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-router-dom": "^6.28.0",
+    "react-router": "^7.6.0",
     "yjs": "^13.6.21"
   },
   "devDependencies": {

packages/frontend/apps/ios/src/app.tsx

@@ -1,6 +1,5 @@
 import { getStoreManager } from '@affine/core/blocksuite/manager/store';
 import { AffineContext } from '@affine/core/components/context';
-import { AppFallback } from '@affine/core/mobile/components/app-fallback';
 import { configureMobileModules } from '@affine/core/mobile/modules';
 import { HapticProvider } from '@affine/core/mobile/modules/haptics';
 import { NavigationGestureProvider } from '@affine/core/mobile/modules/navigation-gesture';
@@ -56,7 +55,7 @@ import { AsyncCall } from 'async-call-rpc';
 import { AppTrackingTransparency } from 'capacitor-plugin-app-tracking-transparency';
 import { useTheme } from 'next-themes';
 import { Suspense, useEffect } from 'react';
-import { RouterProvider } from 'react-router-dom';
+import { RouterProvider } from 'react-router/dom';
 
 import { BlocksuiteMenuConfigProvider } from './bs-menu-config';
 import { ModalConfigProvider } from './modal-config';
@@ -72,10 +71,6 @@ window.addEventListener('beforeunload', () => {
   storeManagerClient.dispose();
 });
 
-const future = {
-  v7_startTransition: true,
-} as const;
-
 const framework = new Framework();
 configureCommonModules(framework);
 configureBrowserWorkbenchModule(framework);
@@ -411,11 +406,7 @@ export function App() {
             <KeyboardThemeProvider />
             <ModalConfigProvider>
               <BlocksuiteMenuConfigProvider>
-                <RouterProvider
-                  fallbackElement={<AppFallback />}
-                  router={router}
-                  future={future}
-                />
+                <RouterProvider router={router} />
               </BlocksuiteMenuConfigProvider>
             </ModalConfigProvider>
           </AffineContext>

packages/frontend/apps/mobile/package.json

@@ -20,7 +20,7 @@
     "@toeverything/infra": "workspace:*",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-router-dom": "^6.28.0"
+    "react-router": "^7.6.0"
   },
   "devDependencies": {
     "@types/react": "^19.0.1",

packages/frontend/apps/mobile/src/app.tsx

@@ -1,5 +1,4 @@
 import { AffineContext } from '@affine/core/components/context';
-import { AppFallback } from '@affine/core/mobile/components/app-fallback';
 import { configureMobileModules } from '@affine/core/mobile/modules';
 import { HapticProvider } from '@affine/core/mobile/modules/haptics';
 import { VirtualKeyboardProvider } from '@affine/core/mobile/modules/virtual-keyboard';
@@ -19,7 +18,7 @@ import { StoreManagerClient } from '@affine/nbstore/worker/client';
 import { Framework, FrameworkRoot, getCurrentStore } from '@toeverything/infra';
 import { OpClient } from '@toeverything/infra/op';
 import { Suspense } from 'react';
-import { RouterProvider } from 'react-router-dom';
+import { RouterProvider } from 'react-router/dom';
 
 let storeManagerClient: StoreManagerClient;
 
@@ -35,10 +34,6 @@ window.addEventListener('beforeunload', () => {
   storeManagerClient.dispose();
 });
 
-const future = {
-  v7_startTransition: true,
-} as const;
-
 const framework = new Framework();
 configureCommonModules(framework);
 configureBrowserWorkbenchModule(framework);
@@ -149,11 +144,7 @@ export function App() {
       <FrameworkRoot framework={frameworkProvider}>
         <I18nProvider>
           <AffineContext store={getCurrentStore()}>
-            <RouterProvider
-              fallbackElement={<AppFallback />}
-              router={router}
-              future={future}
-            />
+            <RouterProvider router={router} />
           </AffineContext>
         </I18nProvider>
       </FrameworkRoot>

packages/frontend/apps/web/package.json

@@ -20,7 +20,7 @@
     "@toeverything/infra": "workspace:*",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-router-dom": "^6.28.0"
+    "react-router": "^7.6.0"
   },
   "devDependencies": {
     "@types/react": "^19.0.1",

packages/frontend/apps/web/src/app.tsx

@@ -1,5 +1,4 @@
 import { AffineContext } from '@affine/core/components/context';
-import { AppContainer } from '@affine/core/desktop/components/app-container';
 import { router } from '@affine/core/desktop/router';
 import { configureCommonModules } from '@affine/core/modules';
 import { I18nProvider } from '@affine/core/modules/i18n';
@@ -18,7 +17,7 @@ import { CacheProvider } from '@emotion/react';
 import { Framework, FrameworkRoot, getCurrentStore } from '@toeverything/infra';
 import { OpClient } from '@toeverything/infra/op';
 import { Suspense } from 'react';
-import { RouterProvider } from 'react-router-dom';
+import { RouterProvider } from 'react-router/dom';
 
 const cache = createEmotionCache();
 
@@ -42,10 +41,6 @@ window.addEventListener('beforeunload', () => {
   storeManagerClient.dispose();
 });
 
-const future = {
-  v7_startTransition: true,
-} as const;
-
 const framework = new Framework();
 configureCommonModules(framework);
 configureBrowserWorkbenchModule(framework);
@@ -90,11 +85,7 @@ export function App() {
         <CacheProvider value={cache}>
           <I18nProvider>
             <AffineContext store={getCurrentStore()}>
-              <RouterProvider
-                fallbackElement={<AppContainer fallback />}
-                router={router}
-                future={future}
-              />
+              <RouterProvider router={router} />
             </AffineContext>
           </I18nProvider>
         </CacheProvider>

packages/frontend/component/package.json

@@ -61,7 +61,7 @@
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "react-paginate": "^8.2.0",
-    "react-router-dom": "^6.28.0",
+    "react-router": "^7.6.0",
     "react-transition-state": "^2.2.0",
     "sonner": "^2.0.0",
     "swr": "^2.2.5",

packages/frontend/component/src/components/auth-components/onboarding-page.tsx

@@ -1,14 +1,16 @@
+import { UserFriendlyError } from '@affine/error';
 import { ArrowRightSmallIcon } from '@blocksuite/icons/rc';
 import clsx from 'clsx';
-import { useMemo, useState } from 'react';
-import type { Location } from 'react-router-dom';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useCallback, useMemo, useState } from 'react';
+import type { Location } from 'react-router';
+import { useLocation, useNavigate } from 'react-router';
 import useSWR from 'swr';
 
 import { Button } from '../../ui/button';
 import { Checkbox } from '../../ui/checkbox';
 import { Divider } from '../../ui/divider';
 import Input from '../../ui/input';
+import { notify } from '../../ui/notification';
 import { ScrollableContainer } from '../../ui/scrollbar';
 import * as styles from './onboarding-page.css';
 import type { User } from './type';
@@ -118,6 +120,21 @@ export const OnboardingPage = ({
     () => questions?.[questionIdx],
     [questionIdx, questions]
   );
+
+  const onClick = useCallback(() => {
+    if (callbackUrl) {
+      const result = navigate(callbackUrl);
+      if (result instanceof Promise) {
+        result.catch((err: Error) => {
+          const error = UserFriendlyError.fromAny(err);
+          console.error(error);
+          notify.error(error);
+        });
+      }
+    } else {
+      onOpenAffine();
+    }
+  }, [callbackUrl, navigate, onOpenAffine]);
   const isMacosDesktop = BUILD_CONFIG.isElectron && environment.isMacOs;
   const isWindowsDesktop = BUILD_CONFIG.isElectron && environment.isWindows;
 
@@ -263,13 +280,7 @@ export const OnboardingPage = ({
           className={clsx(styles.button, styles.openAFFiNEButton)}
           variant="primary"
           size="extraLarge"
-          onClick={() => {
-            if (callbackUrl) {
-              navigate(callbackUrl);
-            } else {
-              onOpenAffine();
-            }
-          }}
+          onClick={onClick}
           suffix={<ArrowRightSmallIcon />}
         >
           Get Started

packages/frontend/component/src/ui/modal/overlay-modal.tsx

@@ -1,7 +1,7 @@
 import { DialogTrigger } from '@radix-ui/react-dialog';
 import { cssVar } from '@toeverything/theme';
 import { memo, useCallback } from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 
 import type { ButtonProps } from '../button';
 import { Button } from '../button';

packages/frontend/core/package.json

@@ -74,7 +74,7 @@
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "react-error-boundary": "^6.0.0",
-    "react-router-dom": "^6.28.0",
+    "react-router": "^7.6.0",
     "react-transition-state": "^2.2.0",
     "react-virtuoso": "^4.12.3",
     "rxjs": "^7.8.1",

packages/frontend/core/src/components/affine/affine-error-boundary/affine-error-fallback.tsx

@@ -4,7 +4,7 @@ import clsx from 'clsx';
 import { Provider } from 'jotai/react';
 import type { FC } from 'react';
 import { useCallback, useMemo } from 'react';
-import { useRouteError } from 'react-router-dom';
+import { useRouteError } from 'react-router';
 
 import * as styles from './affine-error-fallback.css';
 import { ErrorDetail } from './error-basic/error-detail';

packages/frontend/core/src/components/affine/affine-error-boundary/error-basic/info-logger.tsx

@@ -1,7 +1,7 @@
 import { GlobalContextService } from '@affine/core/modules/global-context';
 import { useLiveData, useServices } from '@toeverything/infra';
 import { useEffect } from 'react';
-import { useLocation, useParams } from 'react-router-dom';
+import { useLocation, useParams } from 'react-router';
 
 export interface DumpInfoProps {
   error: any;

packages/frontend/core/src/components/affine/reference-link/index.tsx

@@ -18,7 +18,7 @@ import {
   useRef,
   useState,
 } from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 
 import * as styles from './styles.css';
 

packages/frontend/core/src/components/hooks/affine/use-block-suite-meta-helper.ts

@@ -8,7 +8,7 @@ import { useNavigateHelper } from '../use-navigate-helper';
 
 export function useBlockSuiteMetaHelper() {
   const workspace = useService(WorkspaceService).workspace;
-  const { openPage } = useNavigateHelper();
+  const { jumpToPage } = useNavigateHelper();
   const docsService = useService(DocsService);
   const docRecordList = useService(DocsService).list;
 
@@ -45,9 +45,9 @@ export function useBlockSuiteMetaHelper() {
     async (pageId: string, openPageAfterDuplication: boolean = true) => {
       const newPageId = await docsService.duplicate(pageId);
       openPageAfterDuplication &&
-        openPage(workspace.docCollection.id, newPageId);
+        jumpToPage(workspace.docCollection.id, newPageId);
     },
-    [docsService, openPage, workspace.docCollection.id]
+    [docsService, jumpToPage, workspace.docCollection.id]
   );
 
   return {

packages/frontend/core/src/components/hooks/affine/use-sign-out.ts

@@ -26,7 +26,7 @@ export const useSignOut = ({
 }: ConfirmModalProps = {}) => {
   const t = useI18n();
   const { openConfirmModal } = useConfirmModal();
-  const { openPage } = useNavigateHelper();
+  const { jumpToAll } = useNavigateHelper();
 
   const serverService = useService(ServerService);
   const authService = useService(AuthService);
@@ -56,14 +56,14 @@ export const useSignOut = ({
         w => w.flavour !== serverService.server.id
       );
       if (localWorkspace) {
-        openPage(localWorkspace.id, 'all');
+        jumpToAll(localWorkspace.id);
       }
     }
   }, [
     authService,
     currentWorkspaceFlavour,
+    jumpToAll,
     onConfirm,
-    openPage,
     serverService.server.id,
     workspaces,
   ]);

packages/frontend/core/src/components/hooks/use-navigate-helper.ts

@@ -1,10 +1,12 @@
+import { notify } from '@affine/component';
 import type { SettingTab } from '@affine/core/modules/dialogs/constant';
 import { toDocSearchParams } from '@affine/core/modules/navigation';
 import { getOpenUrlInDesktopAppLink } from '@affine/core/modules/open-in-app';
+import { UserFriendlyError } from '@affine/error';
 import type { DocMode } from '@blocksuite/affine/model';
 import { nanoid } from 'nanoid';
 import { createContext, useCallback, useContext, useMemo } from 'react';
-import type { NavigateFunction, NavigateOptions } from 'react-router-dom';
+import type { NavigateFunction, NavigateOptions, To } from 'react-router';
 
 /**
  * In workbench, we use nested react-router, so default `useNavigate` can't get correct navigate function in workbench.
@@ -22,11 +24,27 @@ export enum RouteLogic {
  * Use this for over workbench navigate, for navigate in workbench, use `WorkbenchService`.
  */
 export function useNavigateHelper() {
-  const navigate = useContext(NavigateContext);
+  const navigateFunction = useContext(NavigateContext);
 
-  if (!navigate) {
-    throw new Error('useNavigateHelper must be used within a NavigateProvider');
-  }
+  const navigate = useCallback(
+    (to: To, options?: NavigateOptions) => {
+      if (!navigateFunction) {
+        throw new Error(
+          'useNavigateHelper must be used within a NavigateProvider'
+        );
+      }
+      const result = navigateFunction(to, options);
+      if (result instanceof Promise) {
+        result.catch((err: Error) => {
+          const error = UserFriendlyError.fromAny(err);
+          console.error(error);
+          notify.error(error);
+        });
+      }
+      return;
+    },
+    [navigateFunction]
+  );
 
   const jumpToPage = useCallback(
     (
@@ -103,11 +121,13 @@ export function useNavigateHelper() {
     [navigate]
   );
 
-  const openPage = useCallback(
-    (workspaceId: string, pageId: string, logic?: RouteLogic) => {
-      return jumpToPage(workspaceId, pageId, logic);
+  const jumpToAll = useCallback(
+    (workspaceId: string, logic?: RouteLogic) => {
+      return navigate(`/workspace/${workspaceId}/all`, {
+        replace: logic === RouteLogic.REPLACE,
+      });
     },
-    [jumpToPage]
+    [navigate]
   );
 
   const jumpToIndex = useCallback(
@@ -215,7 +235,7 @@ export function useNavigateHelper() {
       jumpToPageBlock,
       jumpToIndex,
       jumpTo404,
-      openPage,
+      jumpToAll,
       jumpToExpired,
       jumpToSignIn,
       jumpToCollection,
@@ -231,7 +251,7 @@ export function useNavigateHelper() {
       jumpToPageBlock,
       jumpToIndex,
       jumpTo404,
-      openPage,
+      jumpToAll,
       jumpToExpired,
       jumpToSignIn,
       jumpToCollection,

packages/frontend/core/src/components/page-list/docs/page-list-header.tsx

@@ -25,7 +25,7 @@ import {
 import { useLiveData, useService, useServices } from '@toeverything/infra';
 import clsx from 'clsx';
 import { useCallback, useMemo, useState } from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 
 import { usePageHelper } from '../../../blocksuite/block-suite-page-list/utils';
 import {

packages/frontend/core/src/components/page-list/types.ts

@@ -1,7 +1,7 @@
 import type { CollectionMeta } from '@affine/core/modules/collection';
 import type { DocMeta, Workspace } from '@blocksuite/affine/store';
 import type { JSX, PropsWithChildren, ReactNode } from 'react';
-import type { To } from 'react-router-dom';
+import type { To } from 'react-router';
 
 export type ListItem =
   | DocMeta

packages/frontend/core/src/components/workspace-selector/user-with-workspace-list/workspace-list/index.tsx

@@ -160,7 +160,7 @@ const CloudWorkSpaceList = ({
     if (currentWorkspaceFlavour === server.id) {
       const otherWorkspace = workspaces.find(w => w.flavour !== server.id);
       if (otherWorkspace) {
-        navigateHelper.openPage(otherWorkspace.id, 'all');
+        navigateHelper.jumpToAll(otherWorkspace.id);
       }
     }
   }, [

packages/frontend/core/src/desktop/dialogs/enable-cloud/index.tsx

@@ -49,7 +49,7 @@ const Dialog = ({
     ? workspacesService.open({ metadata: workspaceMeta })
     : { workspace: undefined };
 
-  const { jumpToPage } = useNavigateHelper();
+  const { jumpToPage, jumpToAll } = useNavigateHelper();
 
   const enableCloud = useCallback(async () => {
     try {
@@ -61,7 +61,11 @@ const Dialog = ({
         account.id,
         selectedServer.id
       );
-      jumpToPage(newId, openPageId || 'all');
+      if (openPageId) {
+        jumpToPage(newId, openPageId);
+      } else {
+        jumpToAll(newId);
+      }
       close?.();
     } catch (e) {
       console.error(e);
@@ -74,9 +78,10 @@ const Dialog = ({
     account,
     workspacesService,
     selectedServer.id,
-    jumpToPage,
     openPageId,
     close,
+    jumpToPage,
+    jumpToAll,
     t,
   ]);
 

packages/frontend/core/src/desktop/dialogs/import-template/index.tsx

@@ -57,7 +57,7 @@ const Dialog = ({
     workspaces.find(w => w.flavour !== 'local') ??
     workspaces.at(0);
   const selectedWorkspaceName = useWorkspaceName(selectedWorkspace);
-  const { openPage, jumpToSignIn } = useNavigateHelper();
+  const { jumpToPage, jumpToSignIn } = useNavigateHelper();
 
   const noWorkspace = workspaces.length === 0;
 
@@ -119,7 +119,7 @@ const Dialog = ({
           templateDownloader.data$.value,
           templateMode
         );
-        openPage(selectedWorkspace.id, docId);
+        jumpToPage(selectedWorkspace.id, docId);
         onClose?.();
       } catch (err) {
         setImportingError(err);
@@ -129,8 +129,8 @@ const Dialog = ({
     }
   }, [
     importTemplateService,
+    jumpToPage,
     onClose,
-    openPage,
     selectedWorkspace,
     templateDownloader.data$.value,
     templateMode,
@@ -149,7 +149,7 @@ const Dialog = ({
           'Workspace',
           templateDownloader.data$.value
         );
-      openPage(workspaceId, docId);
+      jumpToPage(workspaceId, docId);
       onClose?.();
     } catch (err) {
       setImportingError(err);
@@ -158,8 +158,8 @@ const Dialog = ({
     }
   }, [
     importTemplateService,
+    jumpToPage,
     onClose,
-    openPage,
     templateDownloader.data$.value,
   ]);
 

packages/frontend/core/src/desktop/pages/ai-upgrade-success/index.tsx

@@ -3,7 +3,7 @@ import { AuthPageContainer } from '@affine/component/auth-components';
 import { useNavigateHelper } from '@affine/core/components/hooks/use-navigate-helper';
 import { Trans, useI18n } from '@affine/i18n';
 import { useCallback } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router';
 
 import * as styles from './styles.css';
 

packages/frontend/core/src/desktop/pages/auth/auth.tsx

@@ -14,8 +14,8 @@ import {
 import { useI18n } from '@affine/i18n';
 import { useLiveData, useService } from '@toeverything/infra';
 import { useCallback } from 'react';
-import type { LoaderFunction } from 'react-router-dom';
-import { redirect, useParams, useSearchParams } from 'react-router-dom';
+import type { LoaderFunction } from 'react-router';
+import { redirect, useParams, useSearchParams } from 'react-router';
 import { z } from 'zod';
 
 import { useMutation } from '../../../components/hooks/use-mutation';

packages/frontend/core/src/desktop/pages/auth/confirm-change-email.tsx

@@ -7,7 +7,7 @@ import { changeEmailMutation } from '@affine/graphql';
 import { useI18n } from '@affine/i18n';
 import { useService } from '@toeverything/infra';
 import { type FC, useEffect, useState } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router';
 
 import { AppContainer } from '../../components/app-container';
 

packages/frontend/core/src/desktop/pages/auth/email-verified-email.tsx

@@ -7,7 +7,7 @@ import { verifyEmailMutation } from '@affine/graphql';
 import { useI18n } from '@affine/i18n';
 import { useService } from '@toeverything/infra';
 import { type FC, useEffect, useState } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router';
 
 import { AppContainer } from '../../components/app-container';
 

packages/frontend/core/src/desktop/pages/auth/magic-link.tsx

@@ -1,12 +1,7 @@
+import { useAsyncNavigate } from '@affine/core/utils/use-async-navigate';
 import { useService } from '@toeverything/infra';
 import { useEffect, useRef } from 'react';
-import {
-  type LoaderFunction,
-  redirect,
-  useLoaderData,
-  // eslint-disable-next-line @typescript-eslint/no-restricted-imports
-  useNavigate,
-} from 'react-router-dom';
+import { type LoaderFunction, redirect, useLoaderData } from 'react-router';
 
 import { AuthService } from '../../../modules/cloud';
 import { supportedClient } from './common';
@@ -58,7 +53,8 @@ export const Component = () => {
   const auth = useService(AuthService);
   const data = useLoaderData() as LoaderData;
 
-  const nav = useNavigate();
+  const nav = useAsyncNavigate();
+
   // loader data from useLoaderData is not reactive, so that we can safely
   // assume the effect below is only triggered once
   const triggeredRef = useRef(false);

packages/frontend/core/src/desktop/pages/auth/oauth-callback.tsx

@@ -1,11 +1,7 @@
+import { useAsyncNavigate } from '@affine/core/utils/use-async-navigate';
 import { useService } from '@toeverything/infra';
 import { useEffect, useRef } from 'react';
-import {
-  type LoaderFunction,
-  redirect,
-  useLoaderData,
-  useNavigate,
-} from 'react-router-dom';
+import { type LoaderFunction, redirect, useLoaderData } from 'react-router';
 
 import { AuthService } from '../../../modules/cloud';
 import { supportedClient } from './common';
@@ -66,7 +62,7 @@ export const Component = () => {
   // assume the effect below is only triggered once
   const triggeredRef = useRef(false);
 
-  const nav = useNavigate();
+  const nav = useAsyncNavigate();
 
   useEffect(() => {
     if (triggeredRef.current) {

packages/frontend/core/src/desktop/pages/auth/oauth-login.tsx

@@ -1,14 +1,9 @@
 import { AuthService } from '@affine/core/modules/cloud';
+import { useAsyncNavigate } from '@affine/core/utils';
 import { OAuthProviderType } from '@affine/graphql';
 import { useService } from '@toeverything/infra';
 import { useEffect } from 'react';
-import {
-  type LoaderFunction,
-  redirect,
-  useLoaderData,
-  // oxlint-disable-next-line @typescript-eslint/no-restricted-imports
-  useNavigate,
-} from 'react-router-dom';
+import { type LoaderFunction, redirect, useLoaderData } from 'react-router';
 import { z } from 'zod';
 
 import { supportedClient } from './common';
@@ -62,7 +57,7 @@ export const Component = () => {
   const auth = useService(AuthService);
   const data = useLoaderData() as LoaderData;
 
-  const nav = useNavigate();
+  const nav = useAsyncNavigate();
 
   useEffect(() => {
     auth

packages/frontend/core/src/desktop/pages/auth/sign-in.tsx

@@ -4,9 +4,10 @@ import { SignInPageContainer } from '@affine/component/auth-components';
 import { SignInPanel } from '@affine/core/components/sign-in';
 import { SignInBackgroundArts } from '@affine/core/components/sign-in/background-arts';
 import type { AuthSessionStatus } from '@affine/core/modules/cloud/entities/session';
+import { useAsyncNavigate } from '@affine/core/utils';
 import { useI18n } from '@affine/i18n';
 import { useCallback, useEffect } from 'react';
-import { useNavigate, useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router';
 
 import {
   RouteLogic,
@@ -19,7 +20,7 @@ export const SignIn = ({
   redirectUrl?: string;
 }) => {
   const t = useI18n();
-  const navigate = useNavigate();
+  const navigate = useAsyncNavigate();
   const { jumpToIndex } = useNavigateHelper();
   const [searchParams] = useSearchParams();
   const redirectUrl = redirectUrlFromProps ?? searchParams.get('redirect_uri');

packages/frontend/core/src/desktop/pages/import-template/index.tsx

@@ -2,7 +2,7 @@ import { GlobalDialogService } from '@affine/core/modules/dialogs';
 import type { DocMode } from '@blocksuite/affine/model';
 import { useService } from '@toeverything/infra';
 import { useEffect } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router';
 
 import { useNavigateHelper } from '../../../components/hooks/use-navigate-helper';
 

packages/frontend/core/src/desktop/pages/index/index.tsx

@@ -17,12 +17,9 @@ import {
   useRef,
   useState,
 } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router';
 
-import {
-  RouteLogic,
-  useNavigateHelper,
-} from '../../../components/hooks/use-navigate-helper';
+import { useNavigateHelper } from '../../../components/hooks/use-navigate-helper';
 import { WorkspaceNavigator } from '../../../components/workspace-selector';
 import { AuthService } from '../../../modules/cloud';
 import { AppContainer } from '../../components/app-container';
@@ -55,7 +52,7 @@ export const Component = ({
   const list = useLiveData(workspacesService.list.workspaces$);
   const listIsLoading = useLiveData(workspacesService.list.isRevalidating$);
 
-  const { openPage, jumpToPage } = useNavigateHelper();
+  const { jumpToAll, jumpToPage } = useNavigateHelper();
   const [searchParams] = useSearchParams();
 
   const createOnceRef = useRef(false);
@@ -68,12 +65,14 @@ export const Component = ({
       .then(({ meta, defaultDocId }) => {
         if (defaultDocId) {
           jumpToPage(meta.id, defaultDocId);
+        } else if (defaultIndexRoute === 'all') {
+          jumpToAll(meta.id);
         } else {
-          openPage(meta.id, defaultIndexRoute);
+          jumpToPage(meta.id, defaultIndexRoute);
         }
       })
       .catch(err => console.error('Failed to create cloud workspace', err));
-  }, [defaultIndexRoute, jumpToPage, openPage, workspacesService]);
+  }, [defaultIndexRoute, jumpToPage, jumpToAll, workspacesService]);
 
   useLayoutEffect(() => {
     if (!navigating) {
@@ -95,7 +94,11 @@ export const Component = ({
         // open first cloud workspace
         const openWorkspace =
           list.find(w => w.flavour === 'affine-cloud') ?? list[0];
-        openPage(openWorkspace.id, defaultIndexRoute);
+        if (defaultIndexRoute === 'all') {
+          jumpToAll(openWorkspace.id);
+        } else {
+          jumpToPage(openWorkspace.id, defaultIndexRoute);
+        }
       } else {
         return;
       }
@@ -108,17 +111,22 @@ export const Component = ({
       const lastId = localStorage.getItem('last_workspace_id');
 
       const openWorkspace = list.find(w => w.id === lastId) ?? list[0];
-      openPage(openWorkspace.id, defaultIndexRoute, RouteLogic.REPLACE);
+      if (defaultIndexRoute === 'all') {
+        jumpToAll(openWorkspace.id);
+      } else {
+        jumpToPage(openWorkspace.id, defaultIndexRoute);
+      }
     }
   }, [
     createCloudWorkspace,
     list,
-    openPage,
     searchParams,
     listIsLoading,
     loggedIn,
     navigating,
     defaultIndexRoute,
+    jumpToAll,
+    jumpToPage,
   ]);
 
   const desktopApi = useServiceOptional(DesktopApiService);
@@ -138,7 +146,7 @@ export const Component = ({
               createdWorkspace.defaultPageId
             );
           } else {
-            openPage(createdWorkspace.meta.id, 'all');
+            jumpToAll(createdWorkspace.meta.id);
           }
         }
       })
@@ -148,7 +156,7 @@ export const Component = ({
       .finally(() => {
         setCreating(false);
       });
-  }, [jumpToPage, openPage, workspacesService]);
+  }, [jumpToAll, jumpToPage, workspacesService]);
 
   if (navigating || creating) {
     return fallback ?? <AppContainer fallback />;

packages/frontend/core/src/desktop/pages/invite/index.tsx

@@ -12,7 +12,7 @@ import { UserFriendlyError } from '@affine/error';
 import { WorkspaceMemberStatus } from '@affine/graphql';
 import { useLiveData, useService } from '@toeverything/infra';
 import { useCallback, useEffect, useState } from 'react';
-import { Navigate, useParams } from 'react-router-dom';
+import { Navigate, useParams } from 'react-router';
 
 import {
   RouteLogic,

packages/frontend/core/src/desktop/pages/onboarding/index.tsx

@@ -1,7 +1,7 @@
 import { DesktopApiService } from '@affine/core/modules/desktop-api';
 import { useServiceOptional } from '@toeverything/infra';
 import { useCallback } from 'react';
-import { redirect } from 'react-router-dom';
+import { redirect } from 'react-router';
 
 import { Onboarding } from '../../../components/affine/onboarding/onboarding';
 import { appConfigStorage } from '../../../components/hooks/use-app-config-storage';

packages/frontend/core/src/desktop/pages/open-app/index.tsx

@@ -10,7 +10,7 @@ import type { GetCurrentUserQuery } from '@affine/graphql';
 import { getCurrentUserQuery } from '@affine/graphql';
 import { useService } from '@toeverything/infra';
 import { useCallback, useEffect, useState } from 'react';
-import { useParams, useSearchParams } from 'react-router-dom';
+import { useParams, useSearchParams } from 'react-router';
 
 import { AppContainer } from '../../components/app-container';
 

packages/frontend/core/src/desktop/pages/redirect/index.tsx

@@ -1,5 +1,5 @@
 import { DebugLogger } from '@affine/debug';
-import { type LoaderFunction, Navigate, useLoaderData } from 'react-router-dom';
+import { type LoaderFunction, Navigate, useLoaderData } from 'react-router';
 
 const trustedDomain = [
   'google.com',

packages/frontend/core/src/desktop/pages/root/index.tsx

@@ -2,7 +2,7 @@ import { NotificationCenter } from '@affine/component';
 import { DefaultServerService } from '@affine/core/modules/cloud';
 import { FrameworkScope, useService } from '@toeverything/infra';
 import { useEffect, useState } from 'react';
-import { Outlet } from 'react-router-dom';
+import { Outlet } from 'react-router';
 
 import { GlobalDialogs } from '../../dialogs';
 import { CustomThemeModifier } from './custom-theme';

packages/frontend/core/src/desktop/pages/subscribe/index.tsx

@@ -10,7 +10,7 @@ import { track } from '@affine/track';
 import { effect, fromPromise, useServices } from '@toeverything/infra';
 import { nanoid } from 'nanoid';
 import { useEffect, useMemo, useState } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router';
 import { switchMap } from 'rxjs';
 
 import { generateSubscriptionCallbackLink } from '../../../components/hooks/affine/use-subscription-notify';

packages/frontend/core/src/desktop/pages/upgrade-success/index.tsx

@@ -3,7 +3,7 @@ import { AuthPageContainer } from '@affine/component/auth-components';
 import { useNavigateHelper } from '@affine/core/components/hooks/use-navigate-helper';
 import { Trans, useI18n } from '@affine/i18n';
 import { useCallback } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router';
 
 import * as styles from './styles.css';
 

packages/frontend/core/src/desktop/pages/upgrade-success/self-host-team/index.tsx

@@ -7,7 +7,7 @@ import { Trans, useI18n } from '@affine/i18n';
 import { CopyIcon } from '@blocksuite/icons/rc';
 import { useLiveData, useService } from '@toeverything/infra';
 import { useCallback, useEffect } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router';
 
 import { PageNotFound } from '../../404';
 import * as styles from './styles.css';

packages/frontend/core/src/desktop/pages/upgrade-to-team/index.tsx

@@ -29,7 +29,7 @@ import { type I18nString, Trans, useI18n } from '@affine/i18n';
 import { DoneIcon, NewPageIcon, SignOutIcon } from '@blocksuite/icons/rc';
 import { useLiveData, useService } from '@toeverything/infra';
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router';
 
 import { Upgrade } from '../../dialogs/setting/general-setting/plans/plan-card';
 import { PageNotFound } from '../404';

packages/frontend/core/src/desktop/pages/workspace/attachment/index.tsx

@@ -4,7 +4,7 @@ import { type Doc, DocsService } from '@affine/core/modules/doc';
 import { type AttachmentBlockModel } from '@blocksuite/affine/model';
 import { FrameworkScope, useLiveData, useService } from '@toeverything/infra';
 import { type ReactElement, useLayoutEffect, useState } from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams } from 'react-router';
 
 import { ViewIcon, ViewTitle } from '../../../../modules/workbench';
 import { PageNotFound } from '../../404';

packages/frontend/core/src/desktop/pages/workspace/collection/index.tsx

@@ -18,7 +18,7 @@ import { useI18n } from '@affine/i18n';
 import { ViewLayersIcon } from '@blocksuite/icons/rc';
 import { useLiveData, useService, useServices } from '@toeverything/infra';
 import { useCallback, useEffect, useState } from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams } from 'react-router';
 
 import { useNavigateHelper } from '../../../../components/hooks/use-navigate-helper';
 import {

packages/frontend/core/src/desktop/pages/workspace/detail-page/detail-page.tsx

@@ -50,7 +50,7 @@ import {
 import clsx from 'clsx';
 import { nanoid } from 'nanoid';
 import { memo, useCallback, useEffect, useRef, useState } from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams } from 'react-router';
 import type { Subscription } from 'rxjs';
 
 import { PageNotFound } from '../../404';

packages/frontend/core/src/desktop/pages/workspace/index.tsx

@@ -30,7 +30,7 @@ import {
   useLocation,
   useParams,
   useSearchParams,
-} from 'react-router-dom';
+} from 'react-router';
 import { map } from 'rxjs';
 import * as _Y from 'yjs';
 

packages/frontend/core/src/desktop/pages/workspace/settings/index.tsx

@@ -3,7 +3,7 @@ import type { SettingTab } from '@affine/core/modules/dialogs/constant';
 import { WorkbenchService } from '@affine/core/modules/workbench';
 import { useService } from '@toeverything/infra';
 import { useEffect, useRef } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router';
 
 export const Component = () => {
   const workbenchService = useService(WorkbenchService);

packages/frontend/core/src/desktop/pages/workspace/share/share-page.tsx

@@ -27,7 +27,7 @@ import { Logo1Icon } from '@blocksuite/icons/rc';
 import { FrameworkScope, useLiveData, useService } from '@toeverything/infra';
 import clsx from 'clsx';
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 
 import { PageNotFound } from '../../404';
 import { ShareFooter } from './share-footer';
@@ -186,7 +186,7 @@ const SharePageInner = ({
 
   const t = useI18n();
   const pageTitle = useLiveData(page?.title$);
-  const { jumpToPageBlock, openPage } = useNavigateHelper();
+  const { jumpToPageBlock, jumpToPage } = useNavigateHelper();
 
   const onEditorLoad = useCallback(
     (editorContainer: AffineEditorContainer) => {
@@ -212,7 +212,7 @@ const SharePageInner = ({
               return;
             }
 
-            return openPage(workspaceId, pageId);
+            return jumpToPage(workspaceId, pageId);
           })
         );
       }
@@ -221,7 +221,13 @@ const SharePageInner = ({
         unbind();
       };
     },
-    [editor, setActiveBlocksuiteEditor, jumpToPageBlock, openPage, workspaceId]
+    [
+      setActiveBlocksuiteEditor,
+      editor,
+      jumpToPage,
+      workspaceId,
+      jumpToPageBlock,
+    ]
   );
 
   if (noPermission) {

packages/frontend/core/src/desktop/pages/workspace/tag/index.tsx

@@ -17,7 +17,7 @@ import {
 } from '@affine/core/modules/workbench';
 import { useLiveData, useService } from '@toeverything/infra';
 import { useCallback, useEffect, useState } from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams } from 'react-router';
 
 import { PageNotFound } from '../../404';
 import { AllDocSidebarTabs } from '../layouts/all-doc-sidebar-tabs';

packages/frontend/core/src/desktop/router.tsx

@@ -1,11 +1,11 @@
-import { wrapCreateBrowserRouterV6 } from '@sentry/react';
+import { wrapCreateBrowserRouterV7 } from '@sentry/react';
 import { useEffect, useState } from 'react';
-import type { RouteObject } from 'react-router-dom';
+import type { RouteObject } from 'react-router';
 import {
   createBrowserRouter as reactRouterCreateBrowserRouter,
   redirect,
   useNavigate,
-} from 'react-router-dom';
+} from 'react-router';
 
 import { AffineErrorComponent } from '../components/affine/affine-error-boundary/affine-error-fallback';
 import { NavigateContext } from '../components/hooks/use-navigate-helper';
@@ -35,11 +35,11 @@ export const topLevelRoutes = [
     children: [
       {
         path: '/',
-        lazy: () => import('./pages/index'),
+        lazy: async () => await import('./pages/index'),
       },
       {
         path: '/workspace/:workspaceId/*',
-        lazy: () => import('./pages/workspace/index'),
+        lazy: async () => await import('./pages/workspace/index'),
       },
       {
         path: '/share/:workspaceId/:pageId',
@@ -49,47 +49,48 @@ export const topLevelRoutes = [
       },
       {
         path: '/404',
-        lazy: () => import('./pages/404'),
+        lazy: async () => await import('./pages/404'),
       },
       {
         path: '/expired',
-        lazy: () => import('./pages/expired'),
+        lazy: async () => await import('./pages/expired'),
       },
       {
         path: '/invite/:inviteId',
-        lazy: () => import('./pages/invite'),
+        lazy: async () => await import('./pages/invite'),
       },
       {
         path: '/upgrade-success',
-        lazy: () => import('./pages/upgrade-success'),
+        lazy: async () => await import('./pages/upgrade-success'),
       },
       {
         path: '/upgrade-success/team',
-        lazy: () => import('./pages/upgrade-success/team'),
+        lazy: async () => await import('./pages/upgrade-success/team'),
       },
       {
         path: '/upgrade-success/self-hosted-team',
-        lazy: () => import('./pages/upgrade-success/self-host-team'),
+        lazy: async () =>
+          await import('./pages/upgrade-success/self-host-team'),
       },
       {
         path: '/ai-upgrade-success',
-        lazy: () => import('./pages/ai-upgrade-success'),
+        lazy: async () => await import('./pages/ai-upgrade-success'),
       },
       {
         path: '/onboarding',
-        lazy: () => import('./pages/onboarding'),
+        lazy: async () => await import('./pages/onboarding'),
       },
       {
         path: '/redirect-proxy',
-        lazy: () => import('./pages/redirect'),
+        lazy: async () => await import('./pages/redirect'),
       },
       {
         path: '/subscribe',
-        lazy: () => import('./pages/subscribe'),
+        lazy: async () => await import('./pages/subscribe'),
       },
       {
         path: '/upgrade-to-team',
-        lazy: () => import('./pages/upgrade-to-team'),
+        lazy: async () => await import('./pages/upgrade-to-team'),
       },
       {
         path: '/try-cloud',
@@ -101,15 +102,15 @@ export const topLevelRoutes = [
       },
       {
         path: '/theme-editor',
-        lazy: () => import('./pages/theme-editor'),
+        lazy: async () => await import('./pages/theme-editor'),
       },
       {
         path: '/clipper/import',
-        lazy: () => import('./pages/import-clipper'),
+        lazy: async () => await import('./pages/import-clipper'),
       },
       {
         path: '/template/import',
-        lazy: () => import('./pages/import-template'),
+        lazy: async () => await import('./pages/import-template'),
       },
       {
         path: '/template/preview',
@@ -133,63 +134,69 @@ export const topLevelRoutes = [
       },
       {
         path: '/auth/:authType',
-        lazy: () => import(/* webpackChunkName: "auth" */ './pages/auth/auth'),
+        lazy: async () =>
+          await import(/* webpackChunkName: "auth" */ './pages/auth/auth'),
       },
       {
         path: '/sign-In',
-        lazy: () =>
-          import(/* webpackChunkName: "auth" */ './pages/auth/sign-in'),
+        lazy: async () =>
+          await import(/* webpackChunkName: "auth" */ './pages/auth/sign-in'),
       },
       {
         path: '/magic-link',
-        lazy: () =>
-          import(/* webpackChunkName: "auth" */ './pages/auth/magic-link'),
+        lazy: async () =>
+          await import(
+            /* webpackChunkName: "auth" */ './pages/auth/magic-link'
+          ),
       },
       {
         path: '/oauth/login',
-        lazy: () =>
-          import(/* webpackChunkName: "auth" */ './pages/auth/oauth-login'),
+        lazy: async () =>
+          await import(
+            /* webpackChunkName: "auth" */ './pages/auth/oauth-login'
+          ),
       },
       {
         path: '/oauth/callback',
-        lazy: () =>
-          import(/* webpackChunkName: "auth" */ './pages/auth/oauth-callback'),
+        lazy: async () =>
+          await import(
+            /* webpackChunkName: "auth" */ './pages/auth/oauth-callback'
+          ),
       },
       // deprecated, keep for old client compatibility
       // TODO(@forehalo): remove
       {
         path: '/desktop-signin',
-        lazy: () =>
-          import(/* webpackChunkName: "auth" */ './pages/auth/oauth-login'),
+        lazy: async () =>
+          await import(
+            /* webpackChunkName: "auth" */ './pages/auth/oauth-login'
+          ),
       },
       // deprecated, keep for old client compatibility
       // use '/sign-in'
       // TODO(@forehalo): remove
       {
         path: '/signIn',
-        lazy: () =>
-          import(/* webpackChunkName: "auth" */ './pages/auth/sign-in'),
+        lazy: async () =>
+          await import(/* webpackChunkName: "auth" */ './pages/auth/sign-in'),
       },
       {
         path: '/open-app/:action',
-        lazy: () => import('./pages/open-app'),
+        lazy: async () => await import('./pages/open-app'),
       },
       {
         path: '*',
-        lazy: () => import('./pages/404'),
+        lazy: async () => await import('./pages/404'),
       },
     ],
   },
 ] satisfies [RouteObject, ...RouteObject[]];
 
-const createBrowserRouter = wrapCreateBrowserRouterV6(
+const createBrowserRouter = wrapCreateBrowserRouterV7(
   reactRouterCreateBrowserRouter
 );
 export const router = (
   window.SENTRY_RELEASE ? createBrowserRouter : reactRouterCreateBrowserRouter
 )(topLevelRoutes, {
   basename: environment.subPath,
-  future: {
-    v7_normalizeFormMethod: true,
-  },
 });

packages/frontend/core/src/desktop/workbench-router.ts

@@ -1,52 +1,52 @@
-import type { RouteObject } from 'react-router-dom';
+import type { RouteObject } from 'react-router';
 
 export const workbenchRoutes = [
   {
     path: '/all',
-    lazy: () => import('./pages/workspace/all-page/all-page'),
+    lazy: async () => await import('./pages/workspace/all-page/all-page'),
   },
   {
     path: '/all-old',
-    lazy: () => import('./pages/workspace/all-page-old/all-page'),
+    lazy: async () => await import('./pages/workspace/all-page-old/all-page'),
   },
   {
     path: '/collection',
-    lazy: () => import('./pages/workspace/all-collection'),
+    lazy: async () => await import('./pages/workspace/all-collection'),
   },
   {
     path: '/collection/:collectionId',
-    lazy: () => import('./pages/workspace/collection/index'),
+    lazy: async () => await import('./pages/workspace/collection/index'),
   },
   {
     path: '/tag',
-    lazy: () => import('./pages/workspace/all-tag'),
+    lazy: async () => await import('./pages/workspace/all-tag'),
   },
   {
     path: '/tag/:tagId',
-    lazy: () => import('./pages/workspace/tag'),
+    lazy: async () => await import('./pages/workspace/tag'),
   },
   {
     path: '/trash',
-    lazy: () => import('./pages/workspace/trash-page'),
+    lazy: async () => await import('./pages/workspace/trash-page'),
   },
   {
     path: '/:pageId',
-    lazy: () => import('./pages/workspace/detail-page/detail-page'),
+    lazy: async () => await import('./pages/workspace/detail-page/detail-page'),
   },
   {
     path: '/:pageId/attachments/:attachmentId',
-    lazy: () => import('./pages/workspace/attachment/index'),
+    lazy: async () => await import('./pages/workspace/attachment/index'),
   },
   {
     path: '/journals',
-    lazy: () => import('./pages/journals'),
+    lazy: async () => await import('./pages/journals'),
   },
   {
     path: '/settings',
-    lazy: () => import('./pages/workspace/settings'),
+    lazy: async () => await import('./pages/workspace/settings'),
   },
   {
     path: '*',
-    lazy: () => import('./pages/404'),
+    lazy: async () => await import('./pages/404'),
   },
 ] satisfies RouteObject[];

packages/frontend/core/src/mobile/components/workspace-selector/menu.tsx

@@ -216,7 +216,7 @@ const CloudWorkSpaceList = ({
     if (currentWorkspaceFlavour === server.id) {
       const otherWorkspace = workspaces.find(w => w.flavour !== server.id);
       if (otherWorkspace) {
-        navigateHelper.openPage(otherWorkspace.id, 'all');
+        navigateHelper.jumpToAll(otherWorkspace.id);
       }
     }
   }, [

packages/frontend/core/src/mobile/pages/root/index.tsx

@@ -2,7 +2,7 @@ import { NotificationCenter } from '@affine/component';
 import { DefaultServerService } from '@affine/core/modules/cloud';
 import { FrameworkScope, useService } from '@toeverything/infra';
 import { useEffect, useState } from 'react';
-import { Outlet } from 'react-router-dom';
+import { Outlet } from 'react-router';
 
 import { GlobalDialogs } from '../../dialogs';
 

packages/frontend/core/src/mobile/pages/sign-in.tsx

@@ -1,10 +1,13 @@
-// eslint-disable-next-line @typescript-eslint/no-restricted-imports
-import { useNavigate } from 'react-router-dom';
+import { useAsyncNavigate } from '@affine/core/utils';
+import { useCallback } from 'react';
 
 import { MobileSignInPanel } from '../components/sign-in';
 
 export const Component = () => {
-  const navigate = useNavigate();
+  const navigate = useAsyncNavigate();
+  const onClose = useCallback(() => {
+    navigate('/');
+  }, [navigate]);
 
-  return <MobileSignInPanel onClose={() => navigate('/')} />;
+  return <MobileSignInPanel onClose={onClose} />;
 };

packages/frontend/core/src/mobile/pages/workspace/collection/detail.tsx

@@ -3,7 +3,7 @@ import { CollectionService } from '@affine/core/modules/collection';
 import { GlobalContextService } from '@affine/core/modules/global-context';
 import { useLiveData, useServices } from '@toeverything/infra';
 import { useEffect } from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams } from 'react-router';
 
 import { CollectionDetail } from '../../../views';
 

packages/frontend/core/src/mobile/pages/workspace/detail/mobile-detail-page.tsx

@@ -37,7 +37,7 @@ import { cssVarV2 } from '@toeverything/theme/v2';
 import clsx from 'clsx';
 import dayjs from 'dayjs';
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams } from 'react-router';
 
 import { AppTabs } from '../../../components';
 import { JournalConflictBlock } from './journal-conflict-block';
@@ -73,7 +73,7 @@ const DetailPageImpl = () => {
   const mode = useLiveData(editor.mode$);
 
   const isInTrash = useLiveData(doc.meta$.map(meta => meta.trash));
-  const { openPage, jumpToPageBlock } = useNavigateHelper();
+  const { jumpToPage, jumpToPageBlock } = useNavigateHelper();
   const scrollViewportRef = useRef<HTMLDivElement | null>(null);
 
   const editorContainer = useLiveData(editor.editorContainer$);
@@ -163,7 +163,7 @@ const DetailPageImpl = () => {
               );
             }
 
-            return openPage(docCollection.id, pageId);
+            return jumpToPage(docCollection.id, pageId);
           })
         );
       }
@@ -178,7 +178,7 @@ const DetailPageImpl = () => {
         disposable.dispose();
       };
     },
-    [docCollection.id, editor, jumpToPageBlock, openPage, server]
+    [docCollection.id, editor, jumpToPage, jumpToPageBlock, server.baseUrl]
   );
 
   const canEdit = useGuard('Doc_Update', doc.id);

packages/frontend/core/src/mobile/pages/workspace/index.tsx

@@ -17,7 +17,7 @@ import {
   type RouteObject,
   useLocation,
   useParams,
-} from 'react-router-dom';
+} from 'react-router';
 
 import { WorkspaceLayout } from './layout';
 import { MobileWorkbenchRoot } from './workbench-root';
@@ -37,7 +37,11 @@ const MobileRouteContainer = ({ route }: { route: Route }) => {
 };
 
 const warpedRoutes = workbenchRoutes.map((originalRoute: RouteObject) => {
-  if (originalRoute.Component || !originalRoute.lazy) {
+  if (
+    originalRoute.Component ||
+    !originalRoute.lazy ||
+    typeof originalRoute.lazy !== 'function'
+  ) {
     return originalRoute;
   }
 

packages/frontend/core/src/mobile/pages/workspace/tag/detail.tsx

@@ -4,7 +4,7 @@ import { GlobalContextService } from '@affine/core/modules/global-context';
 import { TagService } from '@affine/core/modules/tag';
 import { useLiveData, useService } from '@toeverything/infra';
 import { useEffect } from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams } from 'react-router';
 
 import { TagDetail } from '../../../views';
 

packages/frontend/core/src/mobile/pages/workspace/workbench-root.tsx

@@ -5,7 +5,7 @@ import {
 import { ViewRoot } from '@affine/core/modules/workbench/view/view-root';
 import { useLiveData, useService } from '@toeverything/infra';
 import { useEffect } from 'react';
-import { type RouteObject, useLocation } from 'react-router-dom';
+import { type RouteObject, useLocation } from 'react-router';
 
 export const MobileWorkbenchRoot = ({ routes }: { routes: RouteObject[] }) => {
   const workbench = useService(WorkbenchService).workbench;

packages/frontend/core/src/mobile/router.tsx

@@ -1,13 +1,14 @@
 import { NavigateContext } from '@affine/core/components/hooks/use-navigate-helper';
-import { wrapCreateBrowserRouterV6 } from '@sentry/react';
+import { wrapCreateBrowserRouterV7 } from '@sentry/react';
 import { useEffect, useState } from 'react';
-import type { RouteObject } from 'react-router-dom';
+import type { RouteObject } from 'react-router';
 import {
   createBrowserRouter as reactRouterCreateBrowserRouter,
   redirect,
   useNavigate,
-} from 'react-router-dom';
+} from 'react-router';
 
+import { AppFallback } from './components/app-fallback';
 import { RootWrapper } from './pages/root';
 
 function RootRouter() {
@@ -30,77 +31,74 @@ function RootRouter() {
 export const topLevelRoutes = [
   {
     element: <RootRouter />,
+    hydrateFallbackElement: <AppFallback />,
     children: [
       {
         path: '/',
-        lazy: () => import('./pages/index'),
+        lazy: async () => await import('./pages/index'),
       },
       {
         path: '/workspace/:workspaceId/*',
-        lazy: () => import('./pages/workspace/index'),
+        lazy: async () => await import('./pages/workspace/index'),
       },
       {
         path: '/share/:workspaceId/:pageId',
-        loader: ({ params }) => {
+        loader: async ({ params }) => {
           return redirect(`/workspace/${params.workspaceId}/${params.pageId}`);
         },
       },
       {
         path: '/404',
-        lazy: () => import('./pages/404'),
+        lazy: async () => await import('./pages/404'),
       },
       {
         path: '/auth/:authType',
-        lazy: () => import('./pages/auth'),
+        lazy: async () => await import('./pages/auth'),
       },
       {
         path: '/sign-in',
-        lazy: () => import('./pages/sign-in'),
+        lazy: async () => await import('./pages/sign-in'),
       },
       {
         path: '/magic-link',
-        lazy: () =>
-          import(
+        lazy: async () =>
+          await import(
             /* webpackChunkName: "auth" */ '@affine/core/desktop/pages/auth/magic-link'
           ),
       },
       {
         path: '/oauth/login',
-        lazy: () =>
-          import(
+        lazy: async () =>
+          await import(
             /* webpackChunkName: "auth" */ '@affine/core/desktop/pages/auth/oauth-login'
           ),
       },
       {
         path: '/oauth/callback',
-        lazy: () =>
-          import(
+        lazy: async () =>
+          await import(
             /* webpackChunkName: "auth" */ '@affine/core/desktop/pages/auth/oauth-callback'
           ),
       },
       {
         path: '/redirect-proxy',
-        lazy: () => import('@affine/core/desktop/pages/redirect'),
+        lazy: async () => await import('@affine/core/desktop/pages/redirect'),
       },
       {
         path: '/open-app/:action',
-        lazy: () => import('@affine/core/desktop/pages/open-app'),
+        lazy: async () => await import('@affine/core/desktop/pages/open-app'),
       },
       {
         path: '*',
-        lazy: () => import('./pages/404'),
+        lazy: async () => await import('./pages/404'),
       },
     ],
   },
 ] satisfies [RouteObject, ...RouteObject[]];
 
-const createBrowserRouter = wrapCreateBrowserRouterV6(
+const createBrowserRouter = wrapCreateBrowserRouterV7(
   reactRouterCreateBrowserRouter
 );
 export const router = (
   window.SENTRY_RELEASE ? createBrowserRouter : reactRouterCreateBrowserRouter
-)(topLevelRoutes, {
-  future: {
-    v7_normalizeFormMethod: true,
-  },
-});
+)(topLevelRoutes);

packages/frontend/core/src/mobile/workbench-router.ts

@@ -1,4 +1,4 @@
-import type { RouteObject } from 'react-router-dom';
+import type { RouteObject } from 'react-router';
 
 import { Component as All } from './pages/workspace/all';
 import { Component as Collection } from './pages/workspace/collection';
@@ -43,14 +43,15 @@ export const workbenchRoutes = [
   },
   {
     path: '/trash',
-    lazy: () => import('./pages/workspace/trash'),
+    lazy: async () => await import('./pages/workspace/trash'),
   },
   {
     path: '/:pageId',
-    lazy: () => import('./pages/workspace/detail/mobile-detail-page'),
+    lazy: async () =>
+      await import('./pages/workspace/detail/mobile-detail-page'),
   },
   {
     path: '*',
-    lazy: () => import('./pages/404'),
+    lazy: async () => await import('./pages/404'),
   },
 ] satisfies [RouteObject, ...RouteObject[]];

packages/frontend/core/src/modules/app-sidebar/views/menu-item/external-menu-link-item.tsx

@@ -1,7 +1,7 @@
 import { DualLinkIcon } from '@blocksuite/icons/rc';
 import { cssVarV2 } from '@toeverything/theme/v2';
 import type { ReactElement, SVGAttributes } from 'react';
-import type { To } from 'react-router-dom';
+import type { To } from 'react-router';
 
 import { MenuLinkItem } from './index';
 

packages/frontend/core/src/modules/app-sidebar/views/menu-item/index.tsx

@@ -2,7 +2,7 @@ import { WorkbenchLink } from '@affine/core/modules/workbench';
 import { ArrowDownSmallIcon } from '@blocksuite/icons/rc';
 import clsx from 'clsx';
 import React, { type SVGAttributes } from 'react';
-import type { To } from 'react-router-dom';
+import type { To } from 'react-router';
 
 import * as styles from './index.css';
 

packages/frontend/core/src/modules/workbench/view/browser-adapter.ts

@@ -1,8 +1,8 @@
+import { useAsyncNavigate } from '@affine/core/utils';
 import { useLiveData } from '@toeverything/infra';
 import type { Location } from 'history';
 import { useEffect } from 'react';
-// eslint-disable-next-line @typescript-eslint/no-restricted-imports
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation } from 'react-router';
 
 import type { Workbench } from '../entities/workbench';
 
@@ -26,7 +26,7 @@ export function useBindWorkbenchToBrowserRouter(
   workbench: Workbench,
   basename: string
 ) {
-  const navigate = useNavigate();
+  const navigate = useAsyncNavigate();
   const browserLocation = useLocation();
 
   const view = useLiveData(workbench.activeView$);

packages/frontend/core/src/modules/workbench/view/desktop-adapter.ts

@@ -1,7 +1,6 @@
 import type { Location } from 'history';
 import { useEffect } from 'react';
-// eslint-disable-next-line @typescript-eslint/no-restricted-imports
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 
 import type { Workbench } from '../entities/workbench';
 

packages/frontend/core/src/modules/workbench/view/route-container.tsx

@@ -3,7 +3,7 @@ import { AffineErrorBoundary } from '@affine/core/components/affine/affine-error
 import { RightSidebarIcon } from '@blocksuite/icons/rc';
 import { useLiveData, useService } from '@toeverything/infra';
 import { Suspense, useCallback } from 'react';
-import { Outlet } from 'react-router-dom';
+import { Outlet } from 'react-router';
 
 import { AppSidebarService } from '../../app-sidebar';
 import { SidebarSwitch } from '../../app-sidebar/views/sidebar-header';

packages/frontend/core/src/modules/workbench/view/view-root.tsx

@@ -1,12 +1,12 @@
 import { FrameworkScope, useLiveData } from '@toeverything/infra';
 import { useLayoutEffect, useMemo } from 'react';
-import type { RouteObject } from 'react-router-dom';
+import type { RouteObject } from 'react-router';
 import {
   createMemoryRouter,
   RouterProvider,
   UNSAFE_LocationContext,
   UNSAFE_RouteContext,
-} from 'react-router-dom';
+} from 'react-router';
 
 import type { View } from '../entities/view';
 

packages/frontend/core/src/modules/workbench/view/workbench-root.tsx

@@ -9,7 +9,7 @@ import {
 } from '@toeverything/infra';
 import { useAtomValue } from 'jotai';
 import { memo, useCallback, useEffect, useRef, useState } from 'react';
-import { type RouteObject, useLocation } from 'react-router-dom';
+import { type RouteObject, useLocation } from 'react-router';
 
 import type { View } from '../entities/view';
 import { WorkbenchService } from '../services/workbench';

packages/frontend/core/src/utils/index.ts

@@ -5,3 +5,4 @@ export * from './extract-emoji-icon';
 export * from './string2color';
 export * from './toast';
 export * from './unflatten-object';
+export * from './use-async-navigate';

packages/frontend/core/src/utils/use-async-navigate.ts

@@ -0,0 +1,25 @@
+import { notify } from '@affine/component';
+import { UserFriendlyError } from '@affine/error';
+import { useCallback } from 'react';
+import { type NavigateOptions, type To, useNavigate } from 'react-router';
+
+export const useAsyncNavigate = () => {
+  const navigate = useNavigate();
+
+  const nav = useCallback(
+    (to: To, options?: NavigateOptions) => {
+      const result = navigate(to, options);
+      if (result instanceof Promise) {
+        result.catch((err: Error) => {
+          const error = UserFriendlyError.fromAny(err);
+          console.error(error);
+          notify.error(error);
+        });
+      }
+      return;
+    },
+    [navigate]
+  );
+
+  return nav;
+};

packages/frontend/routes/package.json

@@ -18,6 +18,6 @@
   },
   "peerDependencies": {
     "react": "^19.1.0",
-    "react-router-dom": "^7.5.1"
+    "react-router": "^7.5.2"
   }
 }

packages/frontend/track/package.json

@@ -10,7 +10,7 @@
     "@affine/debug": "workspace:*",
     "@sentry/react": "^9.2.0",
     "mixpanel-browser": "^2.56.0",
-    "react-router-dom": "6.30.0"
+    "react-router": "^7.6.0"
   },
   "devDependencies": {
     "@types/mixpanel-browser": "^2.50.2",

packages/frontend/track/src/sentry.ts

@@ -5,7 +5,7 @@ import {
   matchRoutes,
   useLocation,
   useNavigationType,
-} from 'react-router-dom';
+} from 'react-router';
 
 function createSentry() {
   let client: Sentry.BrowserClient | undefined;
@@ -18,7 +18,7 @@ function createSentry() {
           debug: BUILD_CONFIG.debug ?? false,
           environment: BUILD_CONFIG.appBuildType,
           integrations: [
-            Sentry.reactRouterV6BrowserTracingIntegration({
+            Sentry.reactRouterV7BrowserTracingIntegration({
               useEffect,
               useLocation,
               useNavigationType,

tests/affine-local/e2e/blocksuite/embed/synced.spec.ts

@@ -46,6 +46,7 @@ test('should not show hidden note in embed view page mode', async ({
   await createLinkedPage(page, 'Test Page');
   const inlineLink = page.locator('affine-reference');
   await inlineLink.dblclick();
+  await waitForEditorLoad(page);
 
   // reference the previous page
   await page.keyboard.press('Enter');

tests/affine-local/e2e/template.spec.ts

@@ -255,6 +255,7 @@ test('create template doc from sidebar template entrance', async ({ page }) => {
 test('should show starter-bar when doc is empty', async ({ page }) => {
   await openHomePage(page);
   await page.getByTestId('sidebar-new-page-button').click();
+  await waitForEditorLoad(page);
   await page.keyboard.press('ArrowDown');
   const starterBar = page.getByTestId('starter-bar');
   await expect(starterBar).toBeVisible();

tests/affine-mobile/e2e/home.spec.ts

@@ -46,6 +46,7 @@ test('all tab', async ({ page }) => {
   await expect(docsTab).toBeVisible();
 
   await docsTab.click();
+  await page.waitForTimeout(300);
 
   const todayDocs = page.getByTestId('doc-list-item');
   expect(await todayDocs.count()).toBeGreaterThan(0);