[Feature]: Add useRouteMatch

[cloudratha]

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

Add the hook useRouteMatch to get the most relevant match in a component.

Happy to raise a PR if this sounds like a good idea.

Why should this feature be included?

With isomorphic component rendering, you may need to know the pathname and the pattern to render the correct component.

I'm currently using the below:

const {matches} = useContext(UNSAFE_RouteContext)
const match = matches[matches.length - 1]

I've explored useMatches however that requires using a Data Router, and as far as I can tell is not supported with StaticRouter for SSR.

I also had hoped that if we used useRoutes that useMatches would work, but that was not the case.

Other people looking for something similar

[timdorr]

With isomorphic component rendering, you may need to know the pathname and the pattern to render the correct component.

I'm not sure I understand this statement. This is handled by the library itself; it's what Route does for you. There are hooks to render the right URL like useHref or the components like Link that give you the right href in the rendered DOM.

[cloudratha]

Totally agree this is what Route does. However I'm looking to access the route pattern in the active route from a generic component. Rather than having to pass the pattern via props.

In distributed architectures, with Module Federation, we are exploring SSR support in the stack. We need to mirror the Router config within a separate service. So we pass through the current pathname and pattern, so we can still leverage hooks like useParams.

If this is not viable, we can just build a fake Route based of the current params. But thought it worth a request.

[lordphnx]

My case is slightly different. I have a variety of routes all containing a param (listId) somewhere. I want to be able to access the current pattern, so I can replace that param (listId) inside the current Url and keep the rest of the url unaltered.

[alexsr]

I don't understand why useMatches isn't just exposed with the "normal" BrowserRouter.

In my specific case I am using it for conditional back buttons and relative paths in a generic component where I match the route up to a specified handle to see how far up I have to go relatively.

This code snippet is what I use currently.

const {matches: routeMatches} = useContext(UNSAFE_RouteContext)
const basePath = useMemo(() => {
    const filteredRouteMatches = routeMatches.filter(v => !isEmpty(v.route.handle))
    const routeBaseIndex = filteredRouteMatches.findIndex(v => v.route.handle == props.baseRouteHandle)
    const stepsUpFromBase = (filteredRouteMatches.length - 1) - routeBaseIndex
    return stepsUpFromBase > 0 ? Array(stepsUpFromBase).fill('../').join('') : ''
}, [props.baseRouteHandle, routeMatches])

<Route path=":projectId" handle="baseHandle">
<Route path=":itemId" handle="recordBaseHandle" element={<ItemList baseRouteHandle="baseHandle" />} />
</Route>

Let's say I have the path /project01/item4 but I could also have the path /project01/item4/edit/ and I have a list on the sidebar to navigate the items in the project. By attaching a handle to the item-part of the path to match, I can see how if the navigation path should be ../item3 or ../../item3. Sorry if this is confusing.

[brophdawg11]

I've explored useMatches however that requires using a Data Router, and as far as I can tell is not supported with StaticRouter for SSR.

@cloudratha We've got to get the docs out still, but the SSR APIs for data router are stable as of 6.6.0, there's an example here you can check out. Does that satisfy your use case here?

[brophdawg11]

I'm going to close this out for now. If there is still a feature request here, please open up a new Proposal. Thanks!

[geoyws]

This is really needed when we need to replace params on the URL pathname. Right now we will have to resort to using the OP's solution. 😢

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

Add the hook useRouteMatch to get the most relevant match in a component.

Happy to raise a PR if this sounds like a good idea.

Why should this feature be included?

With isomorphic component rendering, you may need to know the pathname and the pattern to render the correct component.

I'm currently using the below:

const {matches} = useContext(UNSAFE_RouteContext)
const match = matches[matches.length - 1]

I've explored useMatches however that requires using a Data Router, and as far as I can tell is not supported with StaticRouter for SSR.

I also had hoped that if we used useRoutes that useMatches would work, but that was not the case.

Other people looking for something similar

[brophdawg11]

Would someone like to open a proposal for this to go through our Open Development Process?