Add optional path segment support to useMatch/matchPath

[rossipedia]

What is the new or updated feature that you are suggesting?

Optional path segment handling in matchPath and useMatch.

Currently it is supported in Route definitions, but not when matching an arbitrary route pattern:

Why should this feature be included?

Feature parity between how <Route /> components are defined and how direct usage of matchPath and useMatch works.

[brophdawg11]

I'm going to convert this to a discussion so it can go through our new Open Development process. Please upvote the new Proposal if you'd like to see this considered!

[brophdawg11]

I think this would be doable, but just for reference where we stand today is that the flattening happens higher in the call stack (in flattenRoutes) so that ranked scoring isn't affected. By the time to code reaches matchPath the route has already been "exploded" and there's nothing optional left in it (hence why matchPath doesn't look for ?). We'd have to probably just have some way to detect whether this was a direct or indirect call and perform the explosion there.

[michalkvasnicak]

I just stumbled on this when I was migrating to v6 in our app. Essentially I didn't know about this until our tests started to fail. Also there is no mention of this behaviour in documentation and one would expect it to work same as Route.path.

[sabotag]

Our team trying migrate to router v6 and we use matchPath with optional segments but it doesn't work correctly but matchRoutes - can find route with optional params. We need this this approach for import/fork sagas by route. Is there any news how its can be fixed or some workarounds? Thank you

[tanato-cit]

For anyone that are trying to find an workaround for this issue while it's not fixed, I've been using some regex to replace optional parameter wildcards :somethingOptional? with the current wildcard that works*:

const route = '/something/:optionalPath?'
const routeToMatch = '/something/1234'

const pathPattern = route.replaceAll(/:(.*?)\?/gi, '*')

matchPattern(pathPattern, routeToMatch)

[dobladov]

Unfortunately this won't cover all my use cases, for example, I need to match /de/en/channels and /de/channels with the same pattern: /:country/:lang?/:slug

https://codesandbox.io/s/react-router-matchpath-dc2cry?file=/src/index.test.js

What @tanato-cit suggests is a good solution if your parameters are at the end.

[tomfridental1]

Could we merge the open pr? Waiting for this change :)

[brophdawg11]

This is resolved by #10768 and will be available in the next release 👍