React-router: useRouteMatch not exported

[smmoosavi]

Version

=> Found "[email protected]"
=> Found "[email protected]"

Test Case

I can't find useRouteMatch in https://unpkg.com/browse/[email protected]/react-router-dom.js

import { useRouteMatch } from 'react-router-dom';
         ^^^^^^^^^^^^^

maybe it is a documentation bug and should be fixed in migration guid.

[timdorr]

The migration path is shown under the relative routes section.

[smmoosavi]

It's not about relative routes migration.

useRouteMatch is needed to detect active tab

// parent route is <Route path="/some-page/*" element={<Child />} />
// Child:
const match = useRouteMatch(':tab') // relative to parent route
const tab = match ? null : match.params.tab
// @material-ui/core tab
<Tabs value={tab}>
  <Tab
    component={Link} // react router link
    value="one" // used for tab
    to="one" // used for link
  />
  <Tab component={Link} value="two" to="two" />
</Tabs>
<Routes>
  <Route path="one" element={<One />} />
  <Route path="two" element={<Two />} />
  <Redirect path="/" to="one" />
</Routes>

[helenhayley]

Is there a fix for this? I'm going down a version because of this issue.

[timdorr]

If someone wants to make a PR, we can look into adding it or an equivalent back.

[xsteadybcgo]

I come across the same problem when processing my typescript-react project, I think it is a issue about the @types/react-router-dom, now I can fix it with import { useRouteMatch } from 'react-router' instead , either other router hooks!

[smmoosavi]

If someone wants to make a PR, we can look into adding it or an equivalent back.

7142

[vjpr]

So currently there is no way to get the matched route from the component.

You could do something like the following as a workaround, but its hacky...

const match = useRoutes([{path: ':tab'}]) // relative to parent route
console.log(match.props.value.tab) // will return the param tab

Why is props not available on the child elements also?

match.props.value also gives you the other params in the entire path which could be useful for breadcrumbs.

// parent route is <Route path="/some-page/*" element={<Child />} />

Also:

useParams contains {'*': 'the child page'}, so you could modify your parent route to include the :tab param. E.g. tabs/:tab. But this means that the parent route has to know about the routing logic of the child which makes things less dynamic/flexible.

---

useMatch(':tab') does seem like it is suppose to solve your use case though, but it requires you to write the full path, not relative to parent. This is unexpected given the description.

Returns match data about a route at the given path relative to the current location.

I don't see the purpose of useMatch as it is currently implemented...

[benneq]

@vjpr

const match = useRoutes([{path: ':tab'}]) // relative to parent route
console.log(match.props.value.tab) // will return the param tab

I guess It should be useRoutes([{path: ':tab/*'}]) and match.props.value.params.tab. Then it works! 👍

And this is at least much more usable than my hacky workaround...

Spoiler: The ugly piece of code

const MyTabs = () => {
  const { tab } = useParams();

  return (
    <Tabs value={tab}>
      <Tab component={Link} to="../tabname1" label="Label 1" value="tabname1" />
      <Tab component={Link} to="../tabname2" label="Label 2" value="tabname2" />
    </Tabs>
  );
}

const MyComponent = () => {
  return (
    <>
      <Routes>
        <Route path=":tab/*" element={<MyTabs />} />
      </Routes>
      <Routes>
        <Route path="tabname1" element={<TabContent1 />} />
        <Route path="tabname2" element={<TabContent2 />} />
      </Routes>
    </>
  )
}

Anyways, I totally agree with your other points and concerns!