title: React Router v6 useRouteMatch equivalent
body: <p>When using React Router v5, it was possible to get the path (pattern) for that route using <a href="https://v5.reactrouter.com/web/api/Hooks/useroutematch" rel="nofollow noreferrer"><code>useRouteMatch</code></a>.</p>
  <pre class="lang-js prettyprint-override"><code>const { path } = useRouteMatch();
  </code></pre>
  <p>React Router v6 offers a similar hook, <a href="https://reactrouter.com/docs/en/v6/hooks/use-match" rel="nofollow noreferrer"><code>useMatch</code></a>; however this expects to receive the pattern you want to match against.</p>
  <p>I would use the React Router v5 hook to generate routes by combining the current path with known params.</p>
  <p>As an example, if I am on the product page of an eCommerce application (let's assume <code>/en/product/:id</code>) and there are links to related products (<code>/en/product/1</code>, <code>/en/product/2</code>...etc), I would previously have been able to do:</p>
  <pre><code>const MyComponent = () =&gt; {
    const { path } = useRouteMatch();
    return (
      &lt;div&gt;
        &lt;Link to={generatePath(path, { id: 1 })}&gt;Related Product 1&lt;/Link&gt;
        &lt;Link to={generatePath(path, { id: 2 })}&gt;Related Product 2&lt;/Link&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>
  <p>Since <code>/en/product</code> comes from an API and is not declared anywhere in the code, I would want the URLs to be updated based on the current path. If the user is on <code>/es/producto</code>, then the links would automatically be updated to <code>/es/producto/1</code>.</p>
  <p>I have seen solutions on SO where it was suggested to use <code>matchRoutes</code>, however it feels highly inefficient, especially since the routes are dynamically generated from an external API.</p>
  <pre><code>const useCurrentPath = () =&gt; {
    const location = useLocation()
    const [{ route }] = matchRoutes(routes, location)
  
    return route.path
  }
  </code></pre>
  <p>I have created a small demo to illustrate how this used to work:</p>
  <p><a href="https://codesandbox.io/s/react-router-use-route-match-v5-93jpzg?file=/src/App.jsx" rel="nofollow noreferrer">Code Sandbox Demo</a></p>