fix: load the URL shown in the address bar when returning to a pushState/replaceState history entry

.changeset/pushstate-page-url-key.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: load the URL shown in the address bar when returning to a `pushState`/`replaceState` history entry

packages/kit/src/runtime/client/client.js

@@ -2522,14 +2522,17 @@ export function pushState(url, state) {
 
 	update_scroll_positions(current_history_index);
 
+	const resolved = resolve_url(url);
+
 	const opts = {
 		[HISTORY_INDEX]: (current_history_index += 1),
 		[NAVIGATION_INDEX]: current_navigation_index,
-		[PAGE_URL_KEY]: page.url.href,
+		// store the address bar URL, so returning to this entry loads what the user saw
+		[PAGE_URL_KEY]: resolved.href,
 		[STATES_KEY]: state
 	};
 
-	history.pushState(opts, '', resolve_url(url));
+	history.pushState(opts, '', resolved);
 	has_navigated = true;
 
 	page.state = state;
@@ -2567,14 +2570,16 @@ export function replaceState(url, state) {
 		}
 	}
 
+	const resolved = resolve_url(url);
+
 	const opts = {
 		[HISTORY_INDEX]: current_history_index,
 		[NAVIGATION_INDEX]: current_navigation_index,
-		[PAGE_URL_KEY]: page.url.href,
+		[PAGE_URL_KEY]: resolved.href,
 		[STATES_KEY]: state
 	};
 
-	history.replaceState(opts, '', resolve_url(url));
+	history.replaceState(opts, '', resolved);
 
 	page.state = state;
 	root.$set({

packages/kit/test/apps/basics/test/client.test.js

@@ -1740,6 +1740,24 @@
 		await expect(page.locator('p')).toHaveText('active: true');
 	});
 
+	test('Loads the pushed URL when returning from a subsequent navigation', async ({
+		baseURL,
+		page,
+		clicknav
+	}) => {
+		await page.goto('/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 clicknav('a[href="/shallow-routing/push-state/b"]');
+		await page.goBack();
+
+		expect(page.url()).toBe(`${baseURL}/shallow-routing/push-state/a`);
+		await expect(page.locator('h1')).toHaveText('a');
+		await expect(page.locator('p')).toHaveText('active: true');
+	});
+
 	test('Replaces state on the current URL', async ({ baseURL, page, clicknav }) => {
 		await page.goto('/shallow-routing/replace-state/b');
 		await clicknav('[href="/shallow-routing/replace-state"]');
@@ -1770,7 +1788,7 @@
 
 		await page.goForward();
 		expect(page.url()).toBe(`${baseURL}/shallow-routing/replace-state/a`);
-		await expect(page.locator('h1')).toHaveText('parent');
+		await expect(page.locator('h1')).toHaveText('a');
 		await expect(page.locator('p')).toHaveText('active: true');
 	});
 
@@ -1798,7 +1816,7 @@
 		);
 	});
 
 	test('Apply async reroute during client side navigation', async ({ page }) => {
 		page
 			.context()
 			.addCookies([{ name: 'reroute-cookie', value: 'yes', path: '/', domain: 'localhost' }]);