Path params do not support `%`

[patrick-jessen]

Which project does this relate to?

Router

Describe the bug

This is a two-fold issue.

• navigate() does not support path params with %
• The router cannot resolve paths with %25

Your Example Website or App

https://stackblitz.com/edit/github-dnzkk3ai?file=src%2Froutes%2Findex.tsx

Steps to Reproduce the Bug or Issue

Regarding navigate():

navigate() will throw URI malformed if a param contains %.
Example: navigate({..., params: {q: "100%"}})
Example: <Link to="100%"> and <Link to="/$q" params={{q:"100%"}}>

Working around the issue
This can be circumvented by manually encoding (though I would expect the library to handle this).
Example: navigate({..., params: {q: encodeURIComponent("100%")}}) - (q then becomes "100%25")

The latter will successfully pushState, although the % ends up double-encoded.
Example: http://website.com/search/100%2525

useParams does successfully double-decode, so const params = useParams() yields {q: "100%"}

However..

Regarding route resolution

The router cannot resolve paths (unless pushState) containing %25 nor %2525.
Examples:
http://website.com/search/100%25 - throws URI malformed in SSR
http://website.com/search/100%2525 - works in SSR but throws URI malformed client side

Expected behavior

• I would expect navigate to handle URI encoding of % for me.
• I would expect the URL to not need double-encoded %2525.
• I would expect the router (SSR and CSR) to be able to handle %25 in path.

Screenshots or Videos

No response

Platform

• OS: macOS
• Version: 1.102.5

Additional context

Related PR for handling % in query-params: #3381

[SeanCassiere]

From, here - #3381 (comment)

I wasn't able to trace and fix this one.

[leesb971204]

From, here - #3381 (comment)

I wasn't able to trace and fix this one.

@SeanCassiere
I think allowing % in a URI is a matter of policy. Based on my experiments, a path named 100% in Next.js works without any issues. However, in React Router, as well as in TanStack Router, it results in a “URI malformed” error. The difference, though, is that in React Router, a path named 100%25 seems to be matched as 100%. This is likely because decodeURI('100%25') returns 100%. However, in TanStack Router, even creating a route named 100% results in a “URI malformed” error.

[leesb971204]

@patrick-jessen

I create new pr for this. #3419
Can you check this please?

[pedrohernandez7]

Hi guys! I am encountering the same problem and this issue blocks me.
if I try to navigate by doing something similar to
/dashboard/${encodeURIComponent(customUserPath)};
and that custom path contains a % the encodeURIComponent function converts it to a %25 but as the author of this PR comments the router does not navigate giving a URI Malformed error.