[Bug]: generatePath/matchPath don't handle encoding/decoding `/` the same

[cbix]

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 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 })));

React example:

const path = '/a/:b/c';
const params = { b: '1/2' };

const Match = () => {
  const { b } = useParams<'b'>();
  return <h1>Hello {b}</h1>
};

const Test = () => {
  return (
    <BrowserRouter>
      <Link to={generatePath(path, params)}>Click me</Link>
      <Routes>
        <Route path={path} element={<Match />} />
        <Route path="*" element={<h1>No match :(</h1>} />
      </Routes>
    </BrowserRouter>
  );
};

Expected Behavior

I expect the match params to be the same as the params passed to generatePath:

{
  params: { b: '1/2' },
  pathname: '/a/1%2F2/c',
  pathnameBase: '/a/1%2F2/c',
  pattern: { path: '/a/:b/c' },
}

React example:

<h1>Hello 1/2</h1>

Actual Behavior

null

React example:

<h1>No match :(</h1>

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.

Related issues

• #11293
• #10213 (?)

[tigerabrodi]

I'm encountering the same issue.

[mjackson]

I think the right fix here is to encodeURIComponent any :param values in generatePath. Note that this does not include * params since the glob is intended to match multiple pathname segments.

[github-actions[bot]]

To align with our new Open Governance model, we are now requiring that all issues have a minimal and runnable reproduction. To that end, we're doing some housekeeping in the repo to clean up existing issues that do not have a valid reproduction. This should get us down to a more manageable number of issues and allow us to be more responsive to existing and newly filed issues.

We're using a Github actions script to identify issues without a reproduction by looking for a StackBlitz, CodeSandbox, or Github link in the issue body. This won't be perfect, so if this issue has a reproduction on another platform, please comment back on here and we can re-open the issue. Similarly, if there's a reproduction buried in a comment, please move the link into the description and comment back. Please tag @brophdawg11 or @brookslybrand in your comment so we get a notification as well 🙂.

If this issue did not have a reproduction but is still valid, or if you wish to start with a fresh issue, please create a new issue with a fresh reproduction against v7 and link to this issue in the new description.

If this a feature request, please open a new Proposal Discussion in React Router, and if it gets enough community support it can be considered for implementation.

If you have any questions you can always reach out on Discord. Thanks again for providing feedback and helping us make React Router even better!

[github-actions[bot]]

🤖 Hello there,

We just published version 7.8.2-pre.0 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[github-actions[bot]]

🤖 Hello there,

We just published version 7.8.2 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!