Router does not work if `base` path contains characters encodable by `encodeURIComponent`

[pedro00dk]

Describe the bug

Hi,

I found and issue when the router base path contains special characters. It seems the internal route matches just fail the router base and location.pathname are not processed the same way.

Examples of base path that fails:

• /%
• /pa%th/anything

If in the URL, one of the path segments is already encoded so that it has a %XX escape sequence, that causes the issue too.

I did a quick investigation and the following are my findings:

The base path is processed here: https://github.com/solidjs/solid-router/blob/main/src/routing.ts#L290 It gets split by /, then encodeURIComponent is applied on each part, and then joined together. If there is any character that gets encoded by encodeURIComponent, it will case the final joined string to be different from the original

After this processing, the resulting string is saved as part of the route's pattern and used to create the route matcher here: https://github.com/solidjs/solid-router/blob/main/src/routing.ts#L301

It splits again pattern by / into a new segments variable which gets captured by the match closure: https://github.com/solidjs/solid-router/blob/main/src/utils.ts#L67

Later, when the previously matcher gets executed, it is called with location.pathname as its location parameter, which would also contain especial characters. https://github.com/solidjs/solid-router/blob/main/src/utils.ts#L71 Unlike the base path, location is only split by / but encodeURIComponent is not called on each of its parts. It is then saved in locSegments. Hence, even if base is identical to location.pathname their segments are processed diferently, and the matching algorithm will returns a mismatch.

I thought about creating a pull request instead to remove encodeURIComponent from base processing, but I don't have the slightest idea why encodeURIComponent is necessary.

Your Example Website or App

https://stackblitz.com/edit/solidjs-templates-bfkgvjmu?file=src%2FApp.tsx

Steps to Reproduce the Bug or Issue

1. Go to stackblitz link
2. Wait container to boot
3. Check the two base variables, comment one at a time to test behavior, click links to trigger navigation.

Expected behavior

Base path and location.pathname with special characters should still match sucessfully.

Screenshots or Videos

No response

Platform

Reproducible on stackblitz

Additional context

No response

[Azq2]

Same shit with @