Routing error when navigating to path that includes an encoded forward slash

[svensigmond]

What version of astro are you using?

2.10.1

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

npm

What operating system are you using?

Windows

What browser are you using?

Firefox

Describe the Bug

Given this folder structure:

src
-pages
--currencies
---[id].astro

When navigating to a route with an encoded forward slash, for example: http://foo.com/currencies/eur%2Fusd, the server returns a type error:

Expected "id" to be a string

dist/index.js:237:19


Stack Trace
TypeError: Expected "id" to be a string
    at Object.generate (project_path\node_modules\path-to-regexp\dist\index.js:237:19)
    at stringifyParams (project_path/packages/client/node_modules/astro/dist/core/routing/params.js:23:31)
    at findPathItemByKey (project_path/packages/client/node_modules/astro/dist/core/render/route-cache.js:74:21)
    at getParamsAndProps (project_path/packages/client/node_modules/astro/dist/core/render/params-and-props.js:19:29)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async matchRoute (project_path/packages/client/node_modules/astro/dist/vite-plugin-astro-server/route.js:35:7)
    at async run (project_path/packages/client/node_modules/astro/dist/vite-plugin-astro-server/request.js:52:28)
    at async runWithErrorHandling (project_path/astro-boilerplate/packages/client/node_modules/astro/dist/vite-plugin-astro-server/controller.js:65:5)
    at async handleRequest (project_path/packages/client/node_modules/astro/dist/vite-plugin-astro-server/request.js:48:3)

This bug seems to have been introduced in the update from version 2.8.4 to 2.8.5.

It is possible to reach the slugged page in version 2.8.4, although the id will not be present in Astro.params, which will return an empty object instead of and object containing the id and value for the slug.

Please see the repo on Stackblitz and click the link on the home page to see the error.

What's the expected result?

I would expect to be able to navigate to urls that have been encoded using encodeURI() or encodeURIComponent(). I also expect these url params to be present in Astro.params.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-mt9ply

Participation

• I am willing to submit a pull request for this issue.

[rishi-raj-jain]

Shouldn't you be using [...slug].astro if you want to go nested paths?

[rishi-raj-jain]

@svensigmond Did you get a look at my comment?

[svensigmond]

Hello @rishi-raj-jain, I had missed your comment. We resolved the issue internally by changing the value of the id in the url, but I did give your solution a spin in the stackblitz example. Using [...id].astro instead of [id].astro does indeed fix the problem but if I correctly understand the documentation for rest parameters this is because Astro now treats 'EUR/USD' as a single parameter. Even though this works in this case, I do feel that I should still be able to encode a url with a forward slash without Astro throwing an exception.

For example lets say I would like to go to a url like this: http://example.com/currencies/eur%2Fusd/details. This would not be possible if I understand the rest parameter slugs in Astro correctly, because it would treat everything after currencies as eur/usd/details even though no hierarchical structer exists between eur and usd. only between eur/usd and details.

To summarize, yes using the rest parameters in the slug does fix the stack blitz example, but merely hides the fact that using encoded forward slashes with Astro is broken. (unless this is by design and I missed this information in the documentation).

[yuvalsade]

any news on this one?

[ematipico]

The expectation is a bit unclear to me. What should be the value id in your case, @svensigmond?

[yuvalsade]

looks like it should be 'eur/usd' inside Astro.params. as it is "eur%2Fusd" in the URL. encountered the same issue myself, with diffrent types of values.

[svensigmond]

@yuvalsade is correct @ematipico. I wanted to use eur/usd as the id, but encoded with encodeURIComponent(). Here is a snippet from the Stackblitz example: (src/pages/index.astro)

<a href={/currencies/${encodeURIComponent('eur/usd')}}>View currency detail page for EUR/USD

[asdfjkalsdfla]

I'm also experiencing this one.

[ascorbic]

This may be fixed by #12079

[florian-lefebvre]

The PR does not fix it

[florian-lefebvre]

We do not plan to support this usecase. Here, looks like you need 2 params instead, that could be /[from]/[to] or /[from]- [to]

[yuvalsade]

Hey The use case isn't about separation of parameters. It's about correct encoding/decoding of '/' character within a value of a single parameter. Right now encoded '/', cannot be used within a path value. For example, let's take a query string parameter. If you encode '&' character, it's legal to be used within a query string value. Otherwise it's a separator. Therefore it's bug fix request, not a requested feature. it should be handled like every other router. E.g: path.split('/'), then urldecode each value. Hope it clarifies the issue. I didn't check the code, but it feels like there is an extra urldecode there. Thank you. בתאריך יום ב׳, 7 באוק׳ 2024, 16:53, מאת Florian Lefebvre ‏< ***@***.***>:

…

We do not plan to support this usecase. Here, looks like you need 2 params instead, that could be /[from]/[to] or /[from]- [to] — Reply to this email directly, view it on GitHub <#7962 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACXEKHF2QNV7UDTL2XTOFBLZ2KG63AVCNFSM6AAAAABPHOSZ4CVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGOJXGAYDCNBVGI> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[ematipico]

I'm glad to bring some good news. This will be supported in Astro v5. You can check it out in 5.0.0-beta.4. Here's a stackblitz as proof:

https://stackblitz.com/edit/github-mt9ply-2xtkfc?file=astro.config.mjs,package.json,src%2Fpages%2Fcurrencies%2F[currency].astro

[svensigmond]

hi @ematipico, I checked out the stackblitz example you linked and I still get an error when navigating to the page with the link on the index page:

It is slightly different from the error in my original stackblitz example, but an error nonetheless:

Original error:

[ematipico]

@svensigmond I suggest providing a reproduction. The initial reproduction uses a very outdated version of Astro

[svensigmond]

Hi @ematipico I have taken another look at the repo you posted at Oct. 9.

There seems to be an error in /pages/currency/[id].astro.

At lines 9, 15 en 18 we are destructuring / using currency. Changing this to id does indeed prove the error has been fixed in Astro 5 🎉