diff --git a/.changeset/rich-dryers-design.md b/.changeset/rich-dryers-design.md new file mode 100644 index 000000000000..7d984be11a16 --- /dev/null +++ b/.changeset/rich-dryers-design.md @@ -0,0 +1,5 @@ +--- +"@sveltejs/kit": patch +--- + +fix: update `page` store when `pushState` or `replaceState` is called diff --git a/packages/kit/src/runtime/client/client.js b/packages/kit/src/runtime/client/client.js index 69e3a61b44ab..969aff6b0b40 100644 --- a/packages/kit/src/runtime/client/client.js +++ b/packages/kit/src/runtime/client/client.js @@ -1876,10 +1876,12 @@ export function pushState(url, state) { [STATES_KEY]: state }; - history.pushState(opts, '', resolve_url(url)); + const url_object = resolve_url(url); + + history.pushState(opts, '', url_object); has_navigated = true; - page = { ...page, state }; + page = { ...page, state, url: url_object, route: { id: url_object.pathname } }; root.$set({ page }); clear_onward_history(current_history_index, current_navigation_index); @@ -1914,9 +1916,11 @@ export function replaceState(url, state) { [STATES_KEY]: state }; - history.replaceState(opts, '', resolve_url(url)); + const url_object = resolve_url(url); + + history.replaceState(opts, '', url_object); - page = { ...page, state }; + page = { ...page, state, url: url_object, route: { id: url_object.pathname } }; root.$set({ page }); } diff --git a/packages/kit/test/apps/basics/src/routes/shallow-routing/push-state/+page.svelte b/packages/kit/test/apps/basics/src/routes/shallow-routing/push-state/+page.svelte index 40c616c3b2a5..6a8c44a6f71a 100644 --- a/packages/kit/test/apps/basics/src/routes/shallow-routing/push-state/+page.svelte +++ b/packages/kit/test/apps/basics/src/routes/shallow-routing/push-state/+page.svelte @@ -20,4 +20,5 @@

active: {$page.state.active ?? false}

+
route.id: {$page.route.id}
{data.now} diff --git a/packages/kit/test/apps/basics/src/routes/shallow-routing/replace-state/+page.svelte b/packages/kit/test/apps/basics/src/routes/shallow-routing/replace-state/+page.svelte index a19674234665..4b009a7fd533 100644 --- a/packages/kit/test/apps/basics/src/routes/shallow-routing/replace-state/+page.svelte +++ b/packages/kit/test/apps/basics/src/routes/shallow-routing/replace-state/+page.svelte @@ -17,3 +17,4 @@

active: {$page.state.active ?? false}

+
route.id: {$page.route.id}
diff --git a/packages/kit/test/apps/basics/test/client.test.js b/packages/kit/test/apps/basics/test/client.test.js index 4df2ba593000..43987edf0d51 100644 --- a/packages/kit/test/apps/basics/test/client.test.js +++ b/packages/kit/test/apps/basics/test/client.test.js @@ -1045,11 +1045,15 @@ test.describe('Shallow routing', () => { test('Pushes state to a new URL', async ({ baseURL, page }) => { await page.goto('/shallow-routing/push-state'); await expect(page.locator('p')).toHaveText('active: false'); + await expect(page.locator('div.route_id')).toHaveText('route.id: /shallow-routing/push-state'); await page.locator('[data-id="two"]').click(); expect(page.url()).toBe(`${baseURL}/shallow-routing/push-state/a`); await expect(page.locator('h1')).toHaveText('parent'); await expect(page.locator('p')).toHaveText('active: true'); + await expect(page.locator('div.route_id')).toHaveText( + 'route.id: /shallow-routing/push-state/a' + ); await page.reload(); await expect(page.locator('h1')).toHaveText('a'); @@ -1115,8 +1119,14 @@ test.describe('Shallow routing', () => { await page.goto('/shallow-routing/replace-state/b'); await clicknav('[href="/shallow-routing/replace-state"]'); + await expect(page.locator('div.route_id')).toHaveText( + 'route.id: /shallow-routing/replace-state' + ); await page.locator('[data-id="two"]').click(); await expect(page.locator('p')).toHaveText('active: true'); + await expect(page.locator('div.route_id')).toHaveText( + 'route.id: /shallow-routing/replace-state/a' + ); await page.goBack(); expect(page.url()).toBe(`${baseURL}/shallow-routing/replace-state/b`);