fix: handle redirect thrown from root layout load when client-side navigating to a non-existent page (#12005)

fixes #11099 We end up in that code path when encountering a 404 route, because we first try to fall back to the server, and load the root error page else, at which point the layout load is run.

Author: teemingc

.changeset/silver-schools-battle.md

@@ -0,0 +1,5 @@
+---
+"@sveltejs/kit": patch
+---
+
+fix: handle `Redirect` thrown from root layout load function when client-side navigating to a non-existent page

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

@@ -1153,32 +1153,41 @@ async function load_root_error_page({ status, error, url, route }) {
 }
 }
 
-const root_layout = await load_node({
-loader: default_layout_loader,
-url,
-params,
-route,
-parent: () => Promise.resolve({}),
-server_data_node: create_data_node(server_data_node)
-});
+try {
+const root_layout = await load_node({
+loader: default_layout_loader,
+url,
+params,
+route,
+parent: () => Promise.resolve({}),
+server_data_node: create_data_node(server_data_node)
+});
 
-/** @type {import('./types.js').BranchNode} */
-const root_error = {
-node: await default_error_loader(),
-loader: default_error_loader,
-universal: null,
-server: null,
-data: null
-};
+/** @type {import('./types.js').BranchNode} */
+const root_error = {
+node: await default_error_loader(),
+loader: default_error_loader,
+universal: null,
+server: null,
+data: null
+};
 
-return get_navigation_result_from_branch({
-url,
-params,
-branch: [root_layout, root_error],
-status,
-error,
-route: null
-});
+return get_navigation_result_from_branch({
+url,
+params,
+branch: [root_layout, root_error],
+status,
+error,
+route: null
+});
+} catch (error) {
+if (error instanceof Redirect) {
+return _goto(new URL(error.location, location.href), {}, 0);
+}
+
+// TODO: this falls back to the server when a server exists, but what about SPA mode?
+throw error;
+}
 }
 
 /**

packages/kit/test/apps/no-ssr/src/routes/+layout.js

@@ -1 +1,9 @@
+import { redirect } from '@sveltejs/kit';
+
 export const ssr = false;
+
+export const load = ({ url }) => {
+if (url.pathname === '/redirect') {
+redirect(302, '/');
+}
+};

packages/kit/test/apps/no-ssr/src/routes/+page.svelte

@@ -0,0 +1 @@
+<h1>home</h1>

packages/kit/test/apps/no-ssr/test/test.js

@@ -8,8 +8,13 @@ test.skip(({ javaScriptEnabled }) => !javaScriptEnabled);
 test.describe.configure({ mode: 'parallel' });
 
 test('navigating to a non-existent route renders the default error page', async ({ page }) => {
-test.setTimeout(3000);
 await page.goto('/non-existent-route');
-await page.waitForLoadState('networkidle');
 expect(await page.textContent('h1')).toBe('404');
 });
+
+test('navigating to a non-existent route redirects if redirect in the root layout', async ({
+page
+}) => {
+await page.goto('/redirect');
+expect(await page.textContent('h1')).toBe('home');
+});