react-router
react-router copied to clipboard
Relative path navigation creates malformed URI segment when any segment contains %25
Reproduction
Go to https://codesandbox.io/p/devbox/dreamy-bessie-g7rvvd?workspaceId=ws_GELsm6sqyvHi1sc81WvkSa and click the "click to go to account" link. observe that accountId is correct. then click the "now click to go to details" link. observe the accountId is wrong
System Info
System:
OS: Linux 6.12 Debian GNU/Linux 13 (trixie) 13 (trixie)
CPU: (24) x64 AMD Ryzen 9 5900X 12-Core Processor
Memory: 9.14 GB / 15.52 GB
Container: Yes
Shell: 0.19.4 - /usr/bin/xonsh
Binaries:
Node: 20.19.2 - /usr/bin/node
npm: 9.2.0 - /usr/bin/npm
bun: 1.2.22 - /usr/local/bin/bun
Browsers:
Chromium: 141.0.7390.54
Firefox: 140.3.1esr
Firefox Developer Edition: 140.3.1esr
npmPackages:
react-router: ^7.9.3 => 7.9.5
vite: ^7.1.9 => 7.1.12
Used Package Manager
npm
Expected Behavior
When I navigate using a relative link such as ./details and the current path segment contains %25 I expect the new URI to also contain %25 and be decoded properly into % in the params value.
Actual Behavior
The renderedMatches only re-encode ? and # https://github.com/remix-run/react-router/blob/e7879a82a4f6c99ff1f38160bb28c5c8f759f377/packages/react-router/lib/hooks.tsx#L901C1-L901C27 and so the % does not get encoded, but left raw in the URI. This results in a failure to decode the path https://github.com/remix-run/react-router/blob/e7879a82a4f6c99ff1f38160bb28c5c8f759f377/packages/react-router/lib/router/utils.ts#L1523 and so the value is used raw, leaving it partially encoded in params (And also breaking browser refresh on the URI)