react-router: [Bug]: params encoded with encodeURIComponent incorrectly decoded if they contain % and other special characters

What version of React Router are you using?

6.15.0

Steps to Reproduce

With the route /web/:param and the string a#b%c
Encode the string with encodeURIComponent and navigate to the path /web/a%23b%25c
Get the param with useParams()
The value should match the original string, instead it becomes a%23b%c - A partially decoded version of the string

Expected Behavior

Any segment in a pathname correctly encoded with encodeURIComponent should be decoded back the same way

Actual Behavior

The param is decoded twice:

First with safelyDecodeURI(pathname) in matchRoutes - This results in a partially decoded value since decodeURI decodes less characters than decodeURIComponent
Then the partially decoded value is decoded again with safelyDecodeURIComponent in matchPath causing it to fail as the url segment is malformed because of the previous decoding.

About this issue

Original URL
State: closed
Created 10 months ago
Reactions: 8
Comments: 17 (8 by maintainers)

Most upvoted comments

Fixed via https://github.com/remix-run/react-router/pull/11199 - will be included in the next release

brophdawg11 on Feb 6, 2024

Hi, would it be possible to have the v5 version updated with this fix as well?

marieletellier on Feb 21, 2024

Just tried out the pre-release, looks good!

RobinClowers on Feb 16, 2024

@brophdawg11 thanks again for being so responsive here, the latest fix resolves all my issues other than the newline issue!

RobinClowers on Jan 26, 2024

I’ve got a PR up to fix this in in #11199 but since path matching and encoding is such a tricky subject I’d love for a few folks to help alpha test the new approach 🙌

I cut an experimental release with those changes - if anyone (OP or other) could test their specific scenario and let me know if it’s fixed that would be super helpful in knowing we’ve got the right fix.

npm install react-router-dom@0.0.0-experimental-114cf0b7

# Outdated experimental (see below comments)
# npm install react-router-dom@0.0.0-experimental-d90c8fb3

I’ve also added the OP issue and the issue reported in #11179 to this code sandbox using the experimental release and things look good there: https://codesandbox.io/p/sandbox/billowing-fast-hv6v4v?file=%2Fsrc%2Findex.js%3A11%2C18

brophdawg11 on Jan 25, 2024