title: why is useMatch not working in React router?
body: <p>I'm learning how to use <code>useMatch()</code> from <code>&quot;react-router-dom&quot;</code>
  I am getting the error below and my web page is blank:</p>
  <pre><code>Uncaught TypeError: Cannot read properties of undefined (reading 'path')
      at matchPath (index.tsx:1148)
      at index.tsx:481
      at mountMemo (react-dom.development.js:15846)
      at Object.useMemo (react-dom.development.js:16219)
      at useMemo (react.development.js:1532)
      at useMatch (index.tsx:481)
      at About (About.js:7)
      at renderWithHooks (react-dom.development.js:14985)
      at mountIndeterminateComponent (react-dom.development.js:17811)
      at beginWork (react-dom.development.js:19049)
  </code></pre>
  <p>my code is below</p>
  <pre><code>import React from &quot;react&quot;
  import { useMatch  } from &quot;react-router-dom&quot;
  import { Link, Route } from &quot;react-router-dom&quot;
  import SinglePage from &quot;./SinglePage&quot;
  
  const About = () =&gt; {
    const { url, path } = useMatch()
    console.log(&quot;hello usematch!&quot;, useMatch())
    return (
      &lt;div&gt;
        &lt;ul&gt;
          &lt;li&gt;
            &lt;Link to={`${url}/about-app`}&gt;About App&lt;/Link&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;Link to={`${url}/about-author`}&gt;About Author&lt;/Link&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
        &lt;Route path={`${path}/:slug`}&gt;
          &lt;SinglePage /&gt;
        &lt;/Route&gt;
      &lt;/div&gt;
    )
  }
  export default About
  </code></pre>
  <p>And below is the <code>index.js</code> file where we get to this about page:</p>
  <pre><code>import React from &quot;react&quot;;
  import ReactDOM from &quot;react-dom&quot;;
  //component file
  import TodoContainer from &quot;./functionBased/components/TodoContainer&quot;;
  import { Route, Routes, BrowserRouter as Router } from &quot;react-router-dom&quot;;
  
  
  //stylesheet
  import &quot;./functionBased/App.css&quot;;
  import About from &quot;./pages/About&quot;;
  import NotMatch from &quot;./pages/NotMatch&quot;;
  //stylesheet
  // import &quot;./App.css&quot;
  ReactDOM.render(
    &lt;React.StrictMode&gt;
      &lt;Router&gt;
        &lt;&gt;
          &lt;Routes&gt;
            &lt;Route exact path=&quot;/&quot; element={&lt;TodoContainer /&gt;} /&gt;
            &lt;Route path=&quot;/about&quot; element={&lt;About /&gt;} /&gt;
            &lt;Route path=&quot;*&quot; element={&lt;NotMatch /&gt;} /&gt;
  
          &lt;/Routes&gt;
        &lt;/&gt;
      &lt;/Router&gt;
    &lt;/React.StrictMode&gt;,
    document.getElementById(&quot;root&quot;)
  );
  
  </code></pre>
  <p>I've tried going through the api <a href="https://react-location.tanstack.com/docs/api" rel="nofollow noreferrer">docs</a> but unclear about why this is not working and how to make the page load. I am trying to return the nearest current route match within the context of where it's called.</p>
  <p>I am quite new to react and <code>router</code> apis.</p>
  <p>Thanks so much</p>