Fix Astro.params does not contain path parameter from URL with non-En…

…glish characters (#6859)
withastro · Apr 17, 2023 · 4c7ba4d · 4c7ba4d
1 parent 1ed52c5
commit 4c7ba4d
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 1 deletion.
diff --git a/.changeset/few-cats-beam.md b/.changeset/few-cats-beam.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fix Astro.params does not contain path parameter from URL with non-English characters.
diff --git a/packages/astro/src/core/render/core.ts b/packages/astro/src/core/render/core.ts
@@ -32,7 +32,9 @@ export async function getParamsAndProps(
 	let pageProps: Props;
 	if (route && !route.pathname) {
 		if (route.params.length) {
-			const paramsMatch = route.pattern.exec(pathname);
+			// The RegExp pattern expects a decoded string, but the pathname is encoded
+			// when the URL contains non-English characters.
+			const paramsMatch = route.pattern.exec(decodeURIComponent(pathname));
 			if (paramsMatch) {
 				params = getParams(route.params)(paramsMatch);
 

diff --git a/packages/astro/test/fixtures/ssr-params/src/pages/東西/[category].astro b/packages/astro/test/fixtures/ssr-params/src/pages/東西/[category].astro
@@ -0,0 +1,12 @@
+---
+const { category } = Astro.params
+---
+<html>
+	<head>
+		<title>Testing</title>
+	</head>
+	<body>
+		<h1>Testing</h1>
+		<h2 class="category">{ category }</h2>
+	</body>
+</html>
diff --git a/packages/astro/test/ssr-params.test.js b/packages/astro/test/ssr-params.test.js
@@ -26,4 +26,16 @@ describe('Astro.params in SSR', () => {
 		const $ = cheerio.load(html);
 		expect($('.category').text()).to.equal('food');
 	});
+
+	describe('Non-english characters in the URL', () => {
+		it('Params are passed to component', async () => {
+			const app = await fixture.loadTestAdapterApp();
+			const request = new Request('http://example.com/users/houston/東西/food');
+			const response = await app.render(request);
+			expect(response.status).to.equal(200);
+			const html = await response.text();
+			const $ = cheerio.load(html);
+			expect($('.category').text()).to.equal('food');
+		});
+	});
 });