Discard preload fork when navigating to a different route

.changeset/shaggy-impalas-look.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: discard preload fork when navigating to a different route

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

@@ -1693,7 +1693,12 @@ async function navigate({
 	// also compare ids to avoid using wrong fork (e.g. a new one could've been added while navigating)
 	const load_cache_fork = intent && load_cache?.id === intent.id ? load_cache.fork : null;
 	// reset preload synchronously after the history state has been set to avoid race conditions
-	load_cache = null;
+	if (load_cache_fork) {
+		load_cache = null;
+	} else {
+		// discard the fork if we're not using it
+		discard_load_cache();
+	}
 
 	navigation_result.props.page.state = state;
 

packages/kit/test/apps/basics/src/routes/data-sveltekit/preload-data/layout-switch/(group-a)/+layout.svelte

@@ -0,0 +1,8 @@
+<script>
+	let { children } = $props();
+</script>
+
+<div id="layout-a">
+	<p>Layout A</p>
+	{@render children()}
+</div>

packages/kit/test/apps/basics/src/routes/data-sveltekit/preload-data/layout-switch/(group-a)/page-a/+page.svelte

@@ -0,0 +1,13 @@
+<script>
+	import { page } from '$app/state';
+</script>
+
+<p id="page-a-content">Page A Content</p>
+<p>current path: {page.url.pathname}</p>
+
+<a href="/data-sveltekit/preload-data/layout-switch">Back to index</a>
+<a
+	id="link-to-b"
+	href="/data-sveltekit/preload-data/layout-switch/page-b"
+	data-sveltekit-preload-data>Go to Page B</a
+>

packages/kit/test/apps/basics/src/routes/data-sveltekit/preload-data/layout-switch/(group-b)/+layout.svelte

@@ -0,0 +1,8 @@
+<script>
+	let { children } = $props();
+</script>
+
+<div id="layout-b">
+	<p>Layout B</p>
+	{@render children()}
+</div>

packages/kit/test/apps/basics/src/routes/data-sveltekit/preload-data/layout-switch/(group-b)/page-b/+page.svelte

@@ -0,0 +1,13 @@
+<script>
+	import { page } from '$app/state';
+</script>
+
+<p id="page-b-content">Page B Content</p>
+<p>current path: {page.url.pathname}</p>
+
+<a href="/data-sveltekit/preload-data/layout-switch">Back to index</a>
+<a
+	id="link-to-a"
+	href="/data-sveltekit/preload-data/layout-switch/page-a"
+	data-sveltekit-preload-data>Go to Page A</a
+>

packages/kit/test/apps/basics/src/routes/data-sveltekit/preload-data/layout-switch/+page.svelte

@@ -0,0 +1,13 @@
+<script>
+	import { page } from '$app/state';
+</script>
+
+<p>current path: {page.url.pathname}</p>
+
+<a id="link-a" href="/data-sveltekit/preload-data/layout-switch/page-a" data-sveltekit-preload-data
+	>Go to Page A</a
+>
+
+<a id="link-b" href="/data-sveltekit/preload-data/layout-switch/page-b" data-sveltekit-preload-data
+	>Go to Page B</a
+>

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

@@ -1062,6 +1062,53 @@ test.describe('data-sveltekit attributes', () => {
 		await expect(page.getByText('slow navigation', { exact: true })).toBeVisible();
 	});
 
+	test('preloading one route then navigating to another shows correct content', async ({
+		page
+	}) => {
+		await page.goto('/data-sveltekit/preload-data/offline');
+
+		// Hover over "target" link to trigger preload
+		await page.locator('#one').dispatchEvent('mousemove');
+		await Promise.all([
+			page.waitForTimeout(100), // wait for preloading to start
+			page.waitForLoadState('networkidle') // wait for preloading to finish
+		]);
+
+		// Now click on "slow-navigation" link (different from preloaded route)
+		await page.locator('#slow-navigation').click();
+		await page.waitForURL('/data-sveltekit/preload-data/offline/slow-navigation');
+
+		// Verify the correct content is displayed (not the preloaded route's content)
+		await expect(page.getByText('slow navigation', { exact: true })).toBeVisible();
+		// Make sure the preloaded route's content is NOT displayed
+		await expect(page.getByText('target', { exact: true })).not.toBeVisible();
+	});
+
+	test('preloading route with layout A then navigating to route with layout B shows correct layout', async ({
+		page
+	}) => {
+		await page.goto('/data-sveltekit/preload-data/layout-switch');
+
+		// Hover over link to Page A (triggers preload for Page A with Layout A)
+		await page.locator('#link-a').dispatchEvent('mousemove');
+		await Promise.all([
+			page.waitForTimeout(100), // wait for preloading to start
+			page.waitForLoadState('networkidle') // wait for preloading to finish
+		]);
+
+		// Now click on link to Page B (different layout group)
+		await page.locator('#link-b').click();
+		await page.waitForURL('/data-sveltekit/preload-data/layout-switch/page-b');
+
+		// Verify Layout B is displayed (not Layout A from preload)
+		await expect(page.locator('#layout-b')).toBeVisible();
+		await expect(page.locator('#layout-a')).not.toBeVisible();
+
+		// Verify Page B content is displayed
+		await expect(page.locator('#page-b-content')).toBeVisible();
+		await expect(page.locator('#page-a-content')).not.toBeVisible();
+	});
+
 	test('data-sveltekit-preload-data tap works after data-sveltekit-preload-code hover', async ({
 		page
 	}) => {