It is expected that a pathname created with generatePath matches the given path in matchPath, Route etc. and yields the input parameters basically unchanged. This is not the case if a parameter contains a slash:
const path = '/a/:b/c';
const b = '1/2';
console.log(matchPath({ path }, generatePath(path, { b })));
Worth noting that matchPath seems to work as expected and decodes %2F to /, however generatePath doesn't encode / to %2F. A workaround for this would be to use encodeURIComponent together with generatePath in cases where this is expected to happen, but actually we don't want to encode all special characters.
Another perspective would be that generatePath is working correctly but matchPath isn't, however there might be ambiguities for multiple parameters (/:foo/:bar) which would need to be ruled out by defining some lookahead logic for matching.
What version of React Router are you using?
6.26.1
Steps to Reproduce
It is expected that a pathname created with
generatePath
matches the given path inmatchPath
,Route
etc. and yields the input parameters basically unchanged. This is not the case if a parameter contains a slash:React example:
Expected Behavior
I expect the match params to be the same as the params passed to
generatePath
:React example:
Actual Behavior
React example:
Worth noting that
matchPath
seems to work as expected and decodes%2F
to/
, howevergeneratePath
doesn't encode/
to%2F
. A workaround for this would be to useencodeURIComponent
together withgeneratePath
in cases where this is expected to happen, but actually we don't want to encode all special characters.Another perspective would be that
generatePath
is working correctly butmatchPath
isn't, however there might be ambiguities for multiple parameters (/:foo/:bar
) which would need to be ruled out by defining some lookahead logic for matching.Related issues
11293
10213 (?)