React-router: [v6] <Route path="app/*"> is matching apples/*

[thedanwoods]

Version

6.0.0-beta.0

Test Case

https://codesandbox.io/s/heuristic-wiles-ycz48?file=/src/App.js

Steps to reproduce

In the sandbox above, click on the Cheeseburger link.

Expected Behavior

It should match the /cheeseburger/* path and render the <Cheeseburger /> component.

Actual Behavior

It gets caught by <Route path="/cheese/*"> and renders the <Cheese /> component.

Additionally, the <Link> in the <Cheese> component thinks we are in /cheese rather than /cheeseburger: the relative <Link to="details"> takes us to /cheese/details even though the current route is /cheeseburger.

This only happens the <Route>s are declared in this order, with the shorter word first:
<Route path="cheese/*" element={<Cheese />} />
<Route path="cheeseburger/*" element={<Cheeseburger />} />

It only happens when there is a trailing /*, e.g. <Route path="cheeseburger/*"> - I think you now always need a /* if there are sub-routes in the child component. It doesn't seem to happen if there is no /*, e.g. <Route path="cheeseburger">.

[timdorr]

Related to #7423

[huttonr]

It appears that the compilePath function is at fault:

https://github.com/ReactTraining/react-router/blob/262b45dd8d6cbdc3a984259c5591ffc3de80d600/packages/react-router/index.tsx#L999

<Route path="/app/*" ... /> is compiling down to the RegExp match pattern: ^(/app)\/?(.*)$

This is causing matchPath('/app/*', '/apples') to match.

Incidentally, this also means that matchPath('/app', '/app?editing=true') doesn't match which makes little sense as search params shouldn't affect whether a route is matched.

This seems (possibly??) only to apply to Routes at the "root" level and not descendant or nested routes.

A more useful RegExp pattern for compilePath to resolve to in the case of /app/* would be ^(\/app)(\/.*|\?.*)?$

I'm not familiar enough with the inner workings of compilePath to submit a PR but perhaps this help to isolate the problem.

I, for one, am eagerly waiting for this to be fixed.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
You can add the fresh label to prevent me from taking any action.

[caseyjhol]

This needs a fresh label.