Fall back to full page reload if link href doesn't match anything (#3969)

* failing test for #3935

* fall back to full page navigation for unmatched routes - closes #3935

* changeset

* fix initial spa render of 404 errors (#3980)

Co-authored-by: mrkishi <[email protected]>

Co-authored-by: mrkishi <[email protected]>

Author: Rich-Harris

.changeset/four-news-turn.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+Fall back to full page reload if link href does not match route manifest

packages/kit/src/runtime/app/navigation.js

@@ -45,8 +45,8 @@ async function invalidate_(resource) {
 /**
  * @type {import('$app/navigation').prefetch}
  */
-function prefetch_(href) {
-	return router.prefetch(new URL(href, get_base_uri(document)));
+async function prefetch_(href) {
+	await router.prefetch(new URL(href, get_base_uri(document)));
 }
 
 /**

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

@@ -149,7 +149,7 @@ export class Renderer {
 		/** @type {Map<string, import('./types').NavigationResult>} */
 		this.cache = new Map();
 
-		/** @type {{id: string | null, promise: Promise<import('./types').NavigationResult> | null}} */
+		/** @type {{id: string | null, promise: Promise<import('./types').NavigationResult | undefined> | null}} */
 		this.loading = {
 			id: null,
 			promise: null
@@ -316,6 +316,11 @@ export class Renderer {
 		const token = (this.token = {});
 		let navigation_result = await this._get_navigation_result(info, no_cache);
 
+		if (!navigation_result) {
+			location.href = info.url.href;
+			return;
+		}
+
 		// abort if user navigated during update
 		if (token !== this.token) return;
 
@@ -411,7 +416,7 @@ export class Renderer {
 
 	/**
 	 * @param {import('./types').NavigationInfo} info
-	 * @returns {Promise<import('./types').NavigationResult>}
+	 * @returns {Promise<import('./types').NavigationResult | undefined>}
 	 */
 	load(info) {
 		this.loading.promise = this._get_navigation_result(info, false);
@@ -471,7 +476,7 @@ export class Renderer {
 	/**
 	 * @param {import('./types').NavigationInfo} info
 	 * @param {boolean} no_cache
-	 * @returns {Promise<import('./types').NavigationResult>}
+	 * @returns {Promise<import('./types').NavigationResult | undefined>}
 	 */
 	async _get_navigation_result(info, no_cache) {
 		if (this.loading.id === info.id && this.loading.promise) {
@@ -504,11 +509,13 @@ export class Renderer {
 			if (result) return result;
 		}
 
-		return await this._load_error({
-			status: 404,
-			error: new Error(`Not found: ${info.url.pathname}`),
-			url: info.url
-		});
+		if (info.initial) {
+			return await this._load_error({
+				status: 404,
+				error: new Error(`Not found: ${info.url.pathname}`),
+				url: info.url
+			});
+		}
 	}
 
 	/**

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

@@ -66,6 +66,7 @@ export class Router {
 		renderer.router = this;
 
 		this.enabled = true;
+		this.initialized = false;
 
 		// make it possible to reset focus
 		document.body.setAttribute('tabindex', '-1');
@@ -257,6 +258,8 @@ export class Router {
 				);
 			}
 		});
+
+		this.initialized = true;
 	}
 
 	#update_scroll_positions() {
@@ -283,7 +286,8 @@ export class Router {
 				id: url.pathname + url.search,
 				routes: this.routes.filter(([pattern]) => pattern.test(path)),
 				url,
-				path
+				path,
+				initial: !this.initialized
 			};
 		}
 	}
@@ -333,7 +337,7 @@ export class Router {
 
 	/**
 	 * @param {URL} url
-	 * @returns {Promise<import('./types').NavigationResult>}
+	 * @returns {Promise<import('./types').NavigationResult | undefined>}
 	 */
 	async prefetch(url) {
 		const info = this.parse(url);

packages/kit/src/runtime/client/types.d.ts

@@ -5,6 +5,7 @@ export type NavigationInfo = {
 	routes: CSRRoute[];
 	url: URL;
 	path: string;
+	initial: boolean;
 };
 
 export type NavigationCandidate = {

packages/kit/test/apps/basics/src/routes/routing/index.svelte

@@ -7,5 +7,6 @@
 <a href="/routing/a">a</a>
 <a href="/routing/ambiguous/ok.json" rel="external">ok</a>
 <a href="http://localhost:{$page.url.searchParams.get('port')}">elsewhere</a>
+<a href="/static.json">static.json</a>
 
 <div class="hydrate-test" />

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

@@ -2112,6 +2112,15 @@ test.describe.parallel('Routing', () => {
 		await page.goto('/routing/rest/complex/prefix-one/two/three');
 		expect(await page.textContent('h1')).toBe('parts: one/two/three');
 	});
+
+	test('links to unmatched routes result in a full page navigation, not a 404', async ({
+		page,
+		clicknav
+	}) => {
+		await page.goto('/routing');
+		await clicknav('[href="/static.json"]');
+		expect(await page.textContent('body')).toBe('"static file"\n');
+	});
 });
 
 test.describe.parallel('Session', () => {