diff --git a/.changeset/few-cats-beam.md b/.changeset/few-cats-beam.md new file mode 100644 index 000000000..7585992ce --- /dev/null +++ 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 index d072c85b4..8687e9006 100644 --- 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 new file mode 100644 index 000000000..bdaa1f965 --- /dev/null +++ b/packages/astro/test/fixtures/ssr-params/src/pages/東西/[category].astro @@ -0,0 +1,12 @@ +--- +const { category } = Astro.params +--- + + + Testing + + +

Testing

+

{ category }

+ + diff --git a/packages/astro/test/ssr-params.test.js b/packages/astro/test/ssr-params.test.js index 37155425e..343e47cf8 100644 --- 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'); + }); + }); });