Bug fix: Order of params for routing has to match (withastro#2593)

* make sure route params are sorted before comparing stringified keys * including changeset for a patch release
harrytran998 · Feb 16, 2022 · 40c0e2b · 40c0e2b
1 parent b4dcc0f
commit 40c0e2b
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 5 deletions.
diff --git a/.changeset/sweet-spoons-cheer.md b/.changeset/sweet-spoons-cheer.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Dynamic route params should ignore param order when matching paths
diff --git a/packages/astro/src/core/render/core.ts b/packages/astro/src/core/render/core.ts
@@ -33,8 +33,7 @@ async function getParamsAndProps(opts: GetParamsAndPropsOptions): Promise<[Param
  routeCacheEntry = await callGetStaticPaths(mod, route, true, logging);
  routeCache.set(route, routeCacheEntry);
  }
- const paramsKey = JSON.stringify(params);
- const matchedStaticPath = findPathItemByKey(routeCacheEntry.staticPaths, paramsKey);
+ const matchedStaticPath = findPathItemByKey(routeCacheEntry.staticPaths, params);
  if (!matchedStaticPath) {
  throw new Error(`[getStaticPaths] route pattern matched, but no matching static path found. (${pathname})`);
  }

diff --git a/packages/astro/src/core/render/route-cache.ts b/packages/astro/src/core/render/route-cache.ts
@@ -1,11 +1,16 @@
-import type { ComponentInstance, GetStaticPathsItem, GetStaticPathsResult, GetStaticPathsResultKeyed, RouteData, RSS } from '../../@types/astro';
+import type { ComponentInstance, GetStaticPathsItem, GetStaticPathsResult, GetStaticPathsResultKeyed, Params, RouteData, RSS } from '../../@types/astro';
 import { LogOptions, warn, debug } from '../logger.js';
 
 import { generatePaginateFunction } from './paginate.js';
 import { validateGetStaticPathsModule, validateGetStaticPathsResult } from '../routing/index.js';
 
 type RSSFn = (...args: any[]) => any;
 
+function stringifyParams(params: Params) {
+ // Always sort keys before stringifying to make sure objects match regardless of parameter ordering
+ return JSON.stringify(params, Object.keys(params).sort());
+}
+
 export async function callGetStaticPaths(mod: ComponentInstance, route: RouteData, isValidate: boolean, logging: LogOptions): Promise<RouteCacheEntry> {
  validateGetStaticPathsModule(mod);
  const resultInProgress = {
@@ -23,7 +28,7 @@ export async function callGetStaticPaths(mod: ComponentInstance, route: RouteDat
  const keyedStaticPaths = staticPaths as GetStaticPathsResultKeyed;
  keyedStaticPaths.keyed = new Map<string, GetStaticPathsItem>();
  for (const sp of keyedStaticPaths) {
- const paramsKey = JSON.stringify(sp.params);
+ const paramsKey = stringifyParams(sp.params);
  keyedStaticPaths.keyed.set(paramsKey, sp);
  }
  if (isValidate) {
@@ -73,7 +78,8 @@ export class RouteCache {
  }
 }
 
-export function findPathItemByKey(staticPaths: GetStaticPathsResultKeyed, paramsKey: string) {
+export function findPathItemByKey(staticPaths: GetStaticPathsResultKeyed, params: Params) {
+ const paramsKey = stringifyParams(params);
  let matchedStaticPath = staticPaths.keyed.get(paramsKey);
  if (matchedStaticPath) {
  return matchedStaticPath;

diff --git a/packages/astro/test/fixtures/astro-get-static-paths/src/pages/blog/[year]/[slug].astro b/packages/astro/test/fixtures/astro-get-static-paths/src/pages/blog/[year]/[slug].astro
@@ -0,0 +1,17 @@
+---
+export async function getStaticPaths() {
+ return [
+ { params: { year: '2022', slug: 'post-1' } },
+ { params: { slug: 'post-2', year: '2022' } },
+ ]
+}
+
+const { year, slug } = Astro.request.params
+---
+
+<html>
+ <head>
+ <title>{year} | {slug}</title>
+ </head>
+ <body></body>
+</html>