fix: navbar link should change url when click on item with hash (#1697)

e2e/fixtures/nav-link-item-with-hash/doc/index.mdx

@@ -0,0 +1,7 @@
+---
+pageType: custom
+---
+
+<div id="pageA">contentA</div>
+
+<div id="pageB">contentB</div>

e2e/fixtures/nav-link-item-with-hash/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@rspress-fixture/rspress-nav-with-hash",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "rspress dev",
+    "build": "rspress build",
+    "preview": "rspress preview"
+  },
+  "dependencies": {
+    "rspress": "workspace:*"
+  },
+  "devDependencies": {
+    "@types/node": "^18.11.17"
+  }
+}

e2e/fixtures/nav-link-item-with-hash/rspress.config.ts

@@ -0,0 +1,23 @@
+import * as path from 'node:path';
+import { defineConfig } from 'rspress/config';
+
+export default defineConfig({
+  root: path.join(__dirname, 'doc'),
+  route: {
+    cleanUrls: true,
+  },
+  themeConfig: {
+    nav: [
+      {
+        text: 'PageA',
+        link: '#pageA',
+        position: 'right',
+      },
+      {
+        text: 'PageB',
+        link: '#pageB',
+        position: 'right',
+      },
+    ],
+  },
+});

e2e/fixtures/nav-link-item-with-hash/tsconfig.json

@@ -0,0 +1 @@
+{}

e2e/tests/nav-link-item-with-hash.test.ts

@@ -0,0 +1,31 @@
+import { expect, test } from '@playwright/test';
+import path from 'node:path';
+import { getPort, killProcess, runDevCommand } from '../utils/runCommands';
+
+const fixtureDir = path.resolve(__dirname, '../fixtures');
+
+test.describe('basic test', async () => {
+  let appPort;
+  let app;
+  test.beforeAll(async () => {
+    const appDir = path.join(fixtureDir, 'nav-link-item-with-hash');
+    appPort = await getPort();
+    app = await runDevCommand(appDir, appPort);
+  });
+
+  test.afterAll(async () => {
+    if (app) {
+      await killProcess(app);
+    }
+  });
+
+  test('Navigate with an hash as link', async ({ page }) => {
+    await page.goto(`http://localhost:${appPort}/`);
+
+    await page.locator('.rspress-nav-menu a').first().click();
+    expect(page.url()).toContain('index#pageA');
+
+    await page.locator('.rspress-nav-menu a').nth(1).click();
+    expect(page.url()).toContain('index#pageB');
+  });
+});

packages/theme-default/src/components/Link/index.tsx

@@ -66,6 +66,7 @@ export function Link(props: LinkProps) {
       const el = document.getElementById(hash);
       if (el) {
         scrollToTarget(el, true);
+        navigate(withQueryUrl, { replace: false });
       }
       return;
     }