diff --git a/.changeset/clever-pillows-sing.md b/.changeset/clever-pillows-sing.md new file mode 100644 index 000000000000..bf32f19feb94 --- /dev/null +++ b/.changeset/clever-pillows-sing.md @@ -0,0 +1,5 @@ +--- +'@sveltejs/kit': patch +--- + +[fix] match route against decoded path on client diff --git a/packages/kit/src/runtime/client/renderer.js b/packages/kit/src/runtime/client/renderer.js index 4b1fdd10b783..11cda1cf6161 100644 --- a/packages/kit/src/runtime/client/renderer.js +++ b/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} 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, diff --git a/packages/kit/src/runtime/client/router.js b/packages/kit/src/runtime/client/router.js index 37a6e59be4da..9fb9c5dd0715 100644 --- a/packages/kit/src/runtime/client/router.js +++ b/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 }; } } diff --git a/packages/kit/src/runtime/client/types.d.ts b/packages/kit/src/runtime/client/types.d.ts index 7b78c53ac1a5..61f6112c4d53 100644 --- a/packages/kit/src/runtime/client/types.d.ts +++ b/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 = {