[fix] match route against decoded path on client

.changeset/clever-pillows-sing.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+[fix] match route against decoded path on client

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

@@ -363,8 +363,7 @@ export class Renderer {
 			const result = await this._load(
 				{
 					route,
-					path: info.path,
-					query: info.query
+					info
 				},
 				no_cache
 			);
@@ -540,8 +539,8 @@ export class Renderer {
 	 * @param {boolean} no_cache
 	 * @returns {Promise<import('./types').NavigationResult | undefined>} undefined if fallthrough
 	 */
-	async _load({ route, path, query }, no_cache) {
-		const key = `${path}?${query}`;
+	async _load({ route, info: { path, decoded_path, query } }, no_cache) {
+		const key = `${decoded_path}?${query}`;
 
 		if (!no_cache) {
 			const cached = this.cache.get(key);
@@ -550,7 +549,7 @@ export class Renderer {
 
 		const [pattern, a, b, get_params] = route;
 		// @ts-expect-error - the pattern is for the route which we've already matched to this path
-		const params = get_params ? get_params(pattern.exec(path)) : {};
+		const params = get_params ? get_params(pattern.exec(decoded_path)) : {};
 
 		const changed = this.current.page && {
 			path: path !== this.current.page.path,

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

@@ -170,13 +170,13 @@ export class Router {
 		if (this.owns(url)) {
 			const path = url.pathname.slice(this.base.length) || '/';
 
-			const decoded = decodeURI(path);
-			const routes = this.routes.filter(([pattern]) => pattern.test(decoded));
+			const decoded_path = decodeURI(path);
+			const routes = this.routes.filter(([pattern]) => pattern.test(decoded_path));
 
 			const query = new URLSearchParams(url.search);
 			const id = `${path}?${query}`;
 
-			return { id, routes, path, query };
+			return { id, routes, path, decoded_path, query };
 		}
 	}
 

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

@@ -5,13 +5,13 @@ export type NavigationInfo = {
 	id: string;
 	routes: CSRRoute[];
 	path: string;
+	decoded_path: string;
 	query: URLSearchParams;
 };
 
 export type NavigationCandidate = {
 	route: CSRPage;
-	path: string;
-	query: URLSearchParams;
+	info: NavigationInfo;
 };
 
 export type NavigationResult = {