A hook for returning the currently rendering match.

[rossipedia]

A useful thing to know is "what part of my route structure is currently rendering?"

This can help in scenarios where you don't care about the URL or the route structure above you, but you care about something below you, and want to handle them in a generic fashion.

An example would be something like MUI's Tabs and Tab component in a component used in a layout route:

import { Link, Outlet } from '@remix-run/react';
import { useMatch } from 'react-router-dom'; // possibly @remix-run/react if re-exported in the future
import { Container, Tabs, Tab } from '@mui/material';

function UserTabLayout() {

  // Proposed hook, this doesn't exist today
  const currentMatch = useRouteMatch();

  const tab = useMatch(currentMatch.path + '/:tab/*')?.params.tab ?? 'profile';

  return (
    <Container>
      <Tabs value={tab}>
        <Tab value="profile" label="Profile" component={Link} to="profile" />
        <Tab value="settings" label="Settings" component={Link} to="settings" />
        <Tab value="security" label="Security" component={Link} to="security" />
      </Tabs>
      <Outlet />
    </Container>
  );
}

Currently, in order for this to work you have to hard-code the path prefix in the useMatch() call:

const tab = useMatch('/users/:id/:tab/*');

While this can be abstracted out to a prop passed in, it still makes things a bit tedious if you need to shuffle around your route files/url structure.

Knowing which entry in useMatches() is currently being rendered can open the door for some really cool generic solutions, I think.

Another viable solution would be to have a hook that returns the route id for the currently rendering route, something like useCurrentRouteId(). This would allow you to look up the match directly by using useMatches(). Either approach would solve the problem.

[brophdawg11]

Related - we have useRouteId internally. We actually expose it as UNSAFE_useRouteId() for access across the react-router/react-router-dom.

Related Issue asking for a similar concept: remix-run/react-router#9543