Route params are incorrectly percent-encoded/decoded when containing spaces and percent signs

[ablasik]

Reproduction

Description

When a route parameter contains both spaces and percent signs (e.g. 2% 0 g - 2), React Router v7 incorrectly parses it and double-encodes parts of the value. As a result, the loader receives a malformed parameter instead of the original value.

Reproduction:

Open below link and click on malformed link
https://stackblitz.com/edit/github-xxbxv2kq-zckgutyc?file=app%2Froutes%2Fmalformed.tsx

System Info

n/a

Used Package Manager

pnpm

Expected Behavior

params.id should equal exactly:

2% 0 g - 2

Actual Behavior

React Router returns:

2%%200%20g%20-%202

[ynakoo]

Thanks for opening this issue — I’ve been able to reproduce it exactly as described.

When navigating to a route like /malformed/2% 0 g - 2, the loader receives:
2%%200%20g%20-%202
instead of:
2% 0 g - 2

React Router currently:

1. Extracts the raw substring for the param
2. Applies decodeURIComponent
3. Later applies encodeURIComponent again, which double-encodes existing % sequences

Proposed Fix:
Introduce a “safe” encoding step that:

• encodes normal characters
• does NOT re-encode already encoded percent sequences

I would like to work on this