Attempted import error: 'useRouteMatch' is not exported from 'react-router-dom'

Question

I have this error when I try to import useRouteMatch from react-router-dom module, I have this error :

Attempted import error: 'useRouteMatch' is not exported from 'react-router-dom'.

do I have a wrong version of the react-router-dom module ?

import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link,
    useRouteMatch,
    useParams
} from "react-router-dom";

I looked in the module's exports, and in fact, it's not exported. Do I have a wrong version of it ?

import _BrowserRouter from "./BrowserRouter";
export { _BrowserRouter as BrowserRouter };
import _HashRouter from "./HashRouter";
export { _HashRouter as HashRouter };
import _Link from "./Link";
export { _Link as Link };
import _MemoryRouter from "./MemoryRouter";
export { _MemoryRouter as MemoryRouter };
import _NavLink from "./NavLink";
export { _NavLink as NavLink };
import _Prompt from "./Prompt";
export { _Prompt as Prompt };
import _Redirect from "./Redirect";
export { _Redirect as Redirect };
import _Route from "./Route";
export { _Route as Route };
import _Router from "./Router";
export { _Router as Router };
import _StaticRouter from "./StaticRouter";
export { _StaticRouter as StaticRouter };
import _Switch from "./Switch";
export { _Switch as Switch };
import _generatePath from "./generatePath";
export { _generatePath as generatePath };
import _matchPath from "./matchPath";
export { _matchPath as matchPath };
import _withRouter from "./withRouter";
export { _withRouter as withRouter };

Please help, I need your brain :)

Answer 1

If upgrading from v5 to v6, replace useRouteMatch with useMatch per the upgrade guide...

https://reactrouter.com/docs/en/v6/upgrading/v5#replace-useroutematch-with-usematch

Answer 2

I Solved updating react-router-dom to a version greater than 5.1

npm install [email protected] --save

Dont forget to boot the app again with npm start to see the changes.

Answer 3

I had the same issue, for me I just needed to update the version of react-router I was using.

useRouteMatch was added with react-router V5.1 https://reacttraining.com/blog/react-router-v5-1/#useroutematch

Update your package.json to "react-router-dom": "^5.1.2",

Delete node modules and run npm install

Answer 4

Simply update your react-router-dom version to latest.

npm i react-router-dom@latest

Answer 5

Check react-router-dom version should be compatible or greater than "5.1" so you can use some hooks like useRouteMatch(), useHistory()..