title: React Router v6: Route tracking with matchRoutes
body: <p>We used our own in-house Route-component to track routes in <code>react-router-dom</code> v5. It looked roughly like this:</p>
  <pre><code>import { Switch, Route } from 'react-router-dom';
  
  // EDIT: This was React-Router v5 code, in v6 &lt;Switch&gt; is replaced by &lt;Routes&gt;
  //       and &lt;Route component={}&gt; is replaced by &lt;Route element={}&gt;
  
  const routes = () =&gt; (
    &lt;Switch&gt;
      &lt;TrackedRoute title=&quot;title to track&quot; path=&quot;/path/home&quot; component={Home} /&gt;
      &lt;TrackedRoute title=&quot;title to track&quot; path=&quot;/path/contact&quot; component={Contact} /&gt;
    &lt;/Switch&gt;
  )
  
  const TrackedRoute = ({ title, ...others }) =&gt; {
    doTrackingThings(title);
    return (
      &lt;Route {...others} /&gt;
    );
  }
  </code></pre>
  <p>But in React Router v6 the Routes component only accepts its own <code>&lt;Route&gt;</code> objects. This is enforced through type equality. Additionally optional params are no longer allowed in route paths, which made our tracking more complicated. If we want to track which route the user is on, how do we do this in React Router v6?</p>