fix(core): unexpected routing history appears on the shared page (#8356)

close AF-1429

https://github.com/user-attachments/assets/a99cf79d-3615-4e0f-835c-2e66b1a34863

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

@@ -165,18 +165,24 @@ export function AffineSharedPageReference({
 
   const isJournal = journalHelper.isPageJournal(pageId);
 
-  const onClick = useCallback(() => {
+  const onClick = useCallback(
-    if (isJournal) {
+    (e: React.MouseEvent) => {
-      track.doc.editor.pageRef.navigate({
+      if (isJournal) {
-        to: 'journal',
+        track.doc.editor.pageRef.navigate({
-      });
+          to: 'journal',
-    }
+        });
+      }
 
-    // update refresh key
+      // update refresh key
-    setRefreshKey(nanoid());
+      setRefreshKey(nanoid());
 
-    return;
+      // Prevent blocksuite link clicked behavior
-  }, [isJournal]);
+      e.stopPropagation();
+
+      return;
+    },
+    [isJournal]
+  );
 
   const query = useMemo(() => {
     // A block/element reference link

tests/affine-cloud/e2e/share-page.spec.ts

@@ -8,6 +8,7 @@ import {
 import { clickEdgelessModeButton } from '@affine-test/kit/utils/editor';
 import { importImage } from '@affine-test/kit/utils/image';
 import {
+  clickNewPageButton,
   getBlockSuiteEditorTitle,
   waitForEditorLoad,
 } from '@affine-test/kit/utils/page-logic';
@@ -213,7 +214,7 @@ test('share page with default edgeless', async ({ page, browser }) => {
   }
 });
 
-test('image preview should should be shown', async ({ page, browser }) => {
+test('image preview should be shown', async ({ page, browser }) => {
   await page.reload();
   await waitForEditorLoad(page);
   await createLocalWorkspace(
@@ -252,3 +253,85 @@ test('image preview should should be shown', async ({ page, browser }) => {
     await expect(locator).not.toBeVisible();
   }
 });
+
+test('The reference links in the shared page should be accessible normally and can go back and forward', async ({
+  page,
+  browser,
+}) => {
+  await page.reload();
+  await waitForEditorLoad(page);
+  await createLocalWorkspace(
+    {
+      name: 'test',
+    },
+    page
+  );
+  await enableCloudWorkspaceFromShareButton(page);
+
+  // create linked page and share
+  const title = getBlockSuiteEditorTitle(page);
+  await title.pressSequentially('Test linked doc', {
+    delay: 50,
+  });
+  await page.keyboard.press('Enter', { delay: 50 });
+  await page.keyboard.type('Test linked content', { delay: 50 });
+  await enableShare(page);
+
+  // create a new page and link to the shared page
+  await clickNewPageButton(page, 'Test Page');
+  await waitForEditorLoad(page);
+  await page.keyboard.press('Enter');
+  await page.keyboard.type('@', { delay: 50 });
+  const linkedPagePopover = page.locator('.linked-doc-popover');
+  await expect(linkedPagePopover).toBeVisible();
+  await page.keyboard.type('Test linked doc', { delay: 50 });
+  await page.keyboard.press('Enter');
+
+  // enable share page and copy page link
+  await enableShare(page);
+  await page.getByTestId('share-menu-copy-link-button').click();
+  await page.getByTestId('share-link-menu-copy-page').click();
+
+  // check share page is accessible
+  {
+    const context = await browser.newContext();
+    await skipOnboarding(context);
+    const url: string = await page.evaluate(() =>
+      navigator.clipboard.readText()
+    );
+    const page2 = await context.newPage();
+    await page2.goto(url);
+    await waitForEditorLoad(page2);
+    const title = getBlockSuiteEditorTitle(page2);
+    await expect(title).toContainText('Test Page');
+
+    // check linked page
+    const link = page2.locator('.affine-reference');
+    await expect(link).toBeVisible();
+    await expect(link).toContainText('Test linked doc');
+    await link.click();
+    await waitForEditorLoad(page2);
+    await expect(
+      page2.locator('.doc-title-container:has-text("Test linked doc")')
+    ).toBeVisible();
+    await expect(page2.locator('affine-paragraph').first()).toContainText(
+      'Test linked content'
+    );
+
+    // go back and forward
+    await page2.goBack();
+    await waitForEditorLoad(page2);
+    await expect(title).toContainText('Test Page');
+    await expect(link).toBeVisible();
+    await expect(link).toContainText('Test linked doc');
+
+    await page2.goForward();
+    await waitForEditorLoad(page2);
+    await expect(
+      page2.locator('.doc-title-container:has-text("Test linked doc")')
+    ).toBeVisible();
+    await expect(page2.locator('affine-paragraph').first()).toContainText(
+      'Test linked content'
+    );
+  }
+});