fix: unexpected jump 404 page (#3190)

apps/web/src/layouts/workspace-layout.tsx

@@ -214,31 +214,6 @@ export const WorkspaceLayoutInner: FC<PropsWithChildren> = ({ children }) => {
   }
   //#endregion
 
-  //#region check if page is valid
-  useEffect(() => {
-    if (
-      typeof router.query.pageId === 'string' &&
-      router.pathname === '/workspace/[workspaceId]/[pageId]' &&
-      currentPageId
-    ) {
-      if (currentPageId !== router.query.pageId) {
-        setCurrentPageId(router.query.pageId);
-      } else {
-        const page =
-          currentWorkspace.blockSuiteWorkspace.getPage(currentPageId);
-        if (!page) {
-          router.push('/404').catch(console.error);
-        }
-      }
-    }
-  }, [
-    currentPageId,
-    currentWorkspace.blockSuiteWorkspace,
-    router,
-    setCurrentPageId,
-  ]);
-  //#endregion
-
   usePassiveWorkspaceEffect(currentWorkspace.blockSuiteWorkspace);
 
   useEffect(() => {

apps/web/src/pages/workspace/[workspaceId]/[pageId].tsx

@@ -8,10 +8,10 @@ import { rootCurrentPageIdAtom } from '@affine/workspace/atom';
 import type { EditorContainer } from '@blocksuite/editor';
 import { assertExists } from '@blocksuite/global/utils';
 import type { Page } from '@blocksuite/store';
-import { useAtomValue } from 'jotai';
+import { useAtom, useAtomValue } from 'jotai';
 import { useRouter } from 'next/router';
 import type React from 'react';
-import { useCallback } from 'react';
+import { useCallback, useEffect } from 'react';
 
 import { getUIAdapter } from '../../../adapters/workspace';
 import { useCurrentWorkspace } from '../../../hooks/current/use-current-workspace';
@@ -73,10 +73,41 @@ const WorkspaceDetail: React.FC = () => {
 const WorkspaceDetailPage: NextPageWithLayout = () => {
   const router = useRouter();
   const [currentWorkspace] = useCurrentWorkspace();
-  const currentPageId = useAtomValue(rootCurrentPageIdAtom);
+  const [currentPageId, setCurrentPageId] = useAtom(rootCurrentPageIdAtom);
   const page = currentPageId
     ? currentWorkspace.blockSuiteWorkspace.getPage(currentPageId)
     : null;
+
+  //#region check if page is valid
+  useEffect(() => {
+    // if the workspace changed, ignore the page check
+    if (currentWorkspace.id !== router.query.workspaceId) {
+      return;
+    }
+    if (
+      typeof router.query.pageId === 'string' &&
+      router.pathname === '/workspace/[workspaceId]/[pageId]' &&
+      currentPageId
+    ) {
+      if (currentPageId !== router.query.pageId) {
+        setCurrentPageId(router.query.pageId);
+      } else {
+        const page =
+          currentWorkspace.blockSuiteWorkspace.getPage(currentPageId);
+        if (!page) {
+          router.push('/404').catch(console.error);
+        }
+      }
+    }
+  }, [
+    currentPageId,
+    currentWorkspace.blockSuiteWorkspace,
+    currentWorkspace.id,
+    router,
+    setCurrentPageId,
+  ]);
+  //#endregion
+
   if (!router.isReady) {
     return <PageDetailSkeleton key="router-not-ready" />;
   } else if (!currentPageId || !page) {