diff --git a/.changeset/heavy-moons-admire.md b/.changeset/heavy-moons-admire.md new file mode 100644 index 000000000000..ebaff018a62c --- /dev/null +++ b/.changeset/heavy-moons-admire.md @@ -0,0 +1,5 @@ +--- +'@sveltejs/kit': patch +--- + +url hash is now properly reflected in page store diff --git a/packages/kit/src/runtime/client/renderer.js b/packages/kit/src/runtime/client/renderer.js index 7568965657ae..ae655b3e4710 100644 --- a/packages/kit/src/runtime/client/renderer.js +++ b/packages/kit/src/runtime/client/renderer.js @@ -159,6 +159,9 @@ export class Renderer { let error_args; + // url.hash is empty when coming from the server + url.hash = window.location.hash; + try { for (let i = 0; i < nodes.length; i += 1) { const is_leaf = i === nodes.length - 1; diff --git a/packages/kit/src/runtime/client/router.js b/packages/kit/src/runtime/client/router.js index 0a723b4232b7..1a3f5d57a274 100644 --- a/packages/kit/src/runtime/client/router.js +++ b/packages/kit/src/runtime/client/router.js @@ -162,6 +162,10 @@ export class Router { // Call `pushState` to add url to history so going back works. // Also make a delay, otherwise the browser default behaviour would not kick in setTimeout(() => history.pushState({}, '', url.href)); + const info = this.parse(url); + if (info) { + return this.renderer.update(info, [], false); + } return; } diff --git a/packages/kit/test/apps/basics/src/routes/routing/hashes/pagestore.svelte b/packages/kit/test/apps/basics/src/routes/routing/hashes/pagestore.svelte new file mode 100644 index 000000000000..b62da28184be --- /dev/null +++ b/packages/kit/test/apps/basics/src/routes/routing/hashes/pagestore.svelte @@ -0,0 +1,19 @@ + + + + +

{curWindowHash}

+

{$page.url.hash}

+ +Nav to #ing with anchor tag +
Target
diff --git a/packages/kit/test/apps/basics/test/test.js b/packages/kit/test/apps/basics/test/test.js index 1e55e2b04611..2abf0275783e 100644 --- a/packages/kit/test/apps/basics/test/test.js +++ b/packages/kit/test/apps/basics/test/test.js @@ -1499,6 +1499,25 @@ test.describe.parallel('Routing', () => { ).toBe('rgb(255, 0, 0)'); }); + test('$page.url.hash is correctly set on page load', async ({ page, javaScriptEnabled }) => { + if (javaScriptEnabled) { + await page.goto('/routing/hashes/pagestore#target'); + expect(await page.textContent('#window-hash')).toBe('#target'); + expect(await page.textContent('#page-url-hash')).toBe('#target'); + } + }); + + test('$page.url.hash is correctly set on navigation', async ({ page, javaScriptEnabled }) => { + if (javaScriptEnabled) { + await page.goto('/routing/hashes/pagestore'); + expect(await page.textContent('#window-hash')).toBe(''); + expect(await page.textContent('#page-url-hash')).toBe(''); + await page.click('[href="#target"]'); + expect(await page.textContent('#window-hash')).toBe('#target'); + expect(await page.textContent('#page-url-hash')).toBe('#target'); + } + }); + test('fallthrough', async ({ page }) => { await page.goto('/routing/fallthrough-simple/invalid'); expect(await page.textContent('h1')).toBe('Page');