why is useMatch not working in React router?

user_11805611 0
Viewed 10342

I'm learning how to use useMatch() from "react-router-dom" I am getting the error below and my web page is blank:

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)

my code is below

import React from "react"
import { useMatch  } from "react-router-dom"
import { Link, Route } from "react-router-dom"
import SinglePage from "./SinglePage"

const About = () => {
  const { url, path } = useMatch()
  console.log("hello usematch!", useMatch())
  return (
    <div>
      <ul>
        <li>
          <Link to={`${url}/about-app`}>About App</Link>
        </li>
        <li>
          <Link to={`${url}/about-author`}>About Author</Link>
        </li>
      </ul>
      <Route path={`${path}/:slug`}>
        <SinglePage />
      </Route>
    </div>
  )
}
export default About

And below is the index.js file where we get to this about page:

import React from "react";
import ReactDOM from "react-dom";
//component file
import TodoContainer from "./functionBased/components/TodoContainer";
import { Route, Routes, BrowserRouter as Router } from "react-router-dom";


//stylesheet
import "./functionBased/App.css";
import About from "./pages/About";
import NotMatch from "./pages/NotMatch";
//stylesheet
// import "./App.css"
ReactDOM.render(
  <React.StrictMode>
    <Router>
      <>
        <Routes>
          <Route exact path="/" element={<TodoContainer />} />
          <Route path="/about" element={<About />} />
          <Route path="*" element={<NotMatch />} />

        </Routes>
      </>
    </Router>
  </React.StrictMode>,
  document.getElementById("root")
);

I've tried going through the api docs 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.

I am quite new to react and router apis.

Thanks so much

react-router-dom react-router reactjs javascript
2 Answers

In react-router-dom v6 the useMatch hook takes a required pattern value that is either a string representing a path or a PathPattern object.

useMatch

declare function useMatch<ParamKey extends string = string>(
  pattern: PathPattern | string
): PathMatch<ParamKey> | null;

PathPattern

interface PathPattern {
  path: string;
  caseSensitive?: boolean;
  end?: boolean;
}

From what I can tell it appears you are attempting to build "nested" routing using the same pattern as was used in v5. This doesn't work the same in v6 though as v6 can utilize relative linking/routing by not specifying an absolute path starting with a leading "/".

See Relative Routes and Links from the v5 migration guide.

Applying relative linking/routing:

const About = () => {
  return (
    <div>
      <ul>
        <li>
          <Link to="about-app">About App</Link>
        </li>
        <li>
          <Link to="about-author">About Author</Link>
        </li>
      </ul>
      <Route path=":slug">
        <SinglePage />
      </Route>
    </div>
  )
}

react-router-dom v6 also now always uses exact path matching, so to ensure any nested Route components can be matched and rendered you should update the lower paths to allow sub-route matching. If "/about" is rendering sub-routes then append a wildcard matcher.

App

<Router>
  <Routes>
    <Route exact path="/" element={<TodoContainer />} />
    <Route path="/about/*" element={<About />} />
    <Route path="*" element={<NotMatch />} />
  </Routes>
</Router>
user_86908570

It appears that you're using the Router from react-router-dom, and not the one from the react-location library, which is the one which provides the useMatch() hook that you need.

You need to use the Router from react-location, and then link your <Router> with the react-location library by passing an instance of ReactLocation via the location prop. I'm basing this off of the docs you linked to in your question.

Your index.js should probably look something like

import React from "react";
import ReactDOM from "react-dom";
//component file
import TodoContainer from "./functionBased/components/TodoContainer";
import { ReactLocation, Router } from 'react-location';

//stylesheet
import "./functionBased/App.css";
import About from "./pages/About";
import NotMatch from "./pages/NotMatch";
//stylesheet
// import "./App.css"

const reactLocation = new ReactLocation();

const routes = [
       {
         path: '/',
         element: <TodoContainer />,
       },
       {
         path: '/about',
         element: <About />,
       },
       {
         element: <NotMatch />,
       },
     ];

ReactDOM.render(
  <React.StrictMode>
    <Router location={reactLocation}
     routes={routes}>
    </Router>
  </React.StrictMode>,
  document.getElementById("root")
);

This article might help clear up the differences on how to use react-router-dom vs react-location.

user_23618630
Related