fix: client-side trailing slash redirect when preloading data (#8982)

* add client-side trailing slash redirect

* lint

* edit comment

* add comments

.changeset/shiny-eagles-drop.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: client-side trailing slash redirect when preloading data

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

@@ -311,7 +311,7 @@ export function create_client({ target }) {
 				);
 				return false;
 			}
-		} else if (/** @type {number} */ (navigation_result.props?.page?.status) >= 400) {
+		} else if (/** @type {number} */ (navigation_result.props.page?.status) >= 400) {
 			const updated = await stores.updated.check();
 			if (updated) {
 				await native_navigation(url);
@@ -331,6 +331,14 @@ export function create_client({ target }) {
 			capture_snapshot(previous_history_index);
 		}
 
+		// ensure the url pathname matches the page's trailing slash option
+		if (
+			navigation_result.props.page?.url &&
+			navigation_result.props.page.url.pathname !== url.pathname
+		) {
+			url.pathname = navigation_result.props.page?.url.pathname;
+		}
+
 		if (opts && opts.details) {
 			const { details } = opts;
 			const change = details.replaceState ? 0 : 1;
@@ -355,6 +363,7 @@ export function create_client({ target }) {
 		if (started) {
 			current = navigation_result.state;
 
+			// reset url before updating page store
 			if (navigation_result.props.page) {
 				navigation_result.props.page.url = url;
 			}

packages/kit/test/apps/basics/src/routes/routing/trailing-slash/+layout.js

@@ -0,0 +1 @@
+export const ssr = false;

packages/kit/test/apps/basics/src/routes/routing/trailing-slash/+layout.svelte

@@ -0,0 +1,13 @@
+<script>
+	import { page } from '$app/stores';
+</script>
+
+<ul data-sveltekit-preload-data="hover">
+	<li><a href="/routing/trailing-slash/always">/always</a></li>
+	<li><a href="/routing/trailing-slash/ignore/">/ignore/</a></li>
+	<li><a href="/routing/trailing-slash/never/">/never/</a></li>
+</ul>
+
+<p>{$page.url.pathname}</p>
+
+<slot />

packages/kit/test/apps/basics/src/routes/routing/trailing-slash/always/+page.js

@@ -0,0 +1 @@
+export const trailingSlash = 'always';

packages/kit/test/apps/basics/src/routes/routing/trailing-slash/ignore/+page.js

@@ -0,0 +1 @@
+export const trailingSlash = 'ignore';

packages/kit/test/apps/basics/test/cross-platform/client.test.js

@@ -660,6 +660,22 @@ test.describe('Routing', () => {
 		await page.locator(selector).click();
 		expect(await page.textContent(selector)).toBe('count: 1');
 	});
+
+	test('trailing slash redirect', async ({ page, clicknav }) => {
+		await page.goto('/routing/trailing-slash');
+
+		await clicknav('a[href="/routing/trailing-slash/always"]');
+		expect(new URL(page.url()).pathname).toBe('/routing/trailing-slash/always/');
+		await expect(page.locator('p')).toHaveText('/routing/trailing-slash/always/');
+
+		await clicknav('a[href="/routing/trailing-slash/never/"]');
+		expect(new URL(page.url()).pathname).toBe('/routing/trailing-slash/never');
+		await expect(page.locator('p')).toHaveText('/routing/trailing-slash/never');
+
+		await clicknav('a[href="/routing/trailing-slash/ignore/"]');
+		expect(new URL(page.url()).pathname).toBe('/routing/trailing-slash/ignore/');
+		await expect(page.locator('p')).toHaveText('/routing/trailing-slash/ignore/');
+	});
 });
 
 test.describe('Shadow DOM', () => {