Can I prevent path parameters (specifically @) from being escaped?
It looks like path parameters are being escaped using encodeURIComponent instead of encodeURI which replaces characters like “@“ with “%40”. Is there a way to disable this behavior (have it use encodeURI internally instead)? If not, would a PR be welcome to update this behavior? (Use encodeURI for path segments but continue to use encodeURIComponent for query string and hash parameters)
Edit:
Upon looking further it seems encodeURI would probably be a bad idea as it would not escape “?” or “#”. Seems like a likely foot gun. I’m open to other ideas though.
I can manually include my param in the “to” prop in a string template. e.g. <Link to={‘/${handle}/childView’}>…
But only in a link wrapper that loses type safety. Any other workarounds for this?
Edit 2:
I can hack it by passing ‘new String(handle)’ as the parameter value. This bypasses the call to encodeURIComponent in react-router/src/path.ts (interpolatePath) since it doesn’t have a typeof “string”. Would it be acceptable to have a special encode function here that leaves “@“ characters alone? Could be an opt-in feature. Again, happy to create a PR, I’d just like to gather some opinions before then.
Edit 3:
Created a PR: https://github.com/TanStack/router/pull/2677
GitHub
feat(react-router): allow @ characters in path segments by alma-lp ...
Currently any path params with a "@" character are URI encoded. Modern browsers handle this fine and it is a common pattern (e.g. youtube.com/@exampleChannel) to have them unencod...
0 Replies