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 :)

Could you accept my initial answer as that was the one that answered your question in the post. Thanks :) — P. Brew, Jan 10 '20 at 10:10

score 17 · Answer 1 · answered Oct 16 '19 at 12:35

17

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

answered Oct 16 '19 at 12:35

P. Brew

438
2
9

Thank you, I was thinking, Man I have React Router V5, just needed to get latest: `npm i react-router-dom@latest` to get the most recent version. – Eric Bishard Nov 03 '19 at 19:40
1

Also update react-router to the same version, or you will likely get this error > Error: Invariant failed: You should not use outside a https://gist.github.com/StringEpsilon/88c7b049c891425232aaf88e7c882e05 shows you how to diagnose this error. My case was forgetting to update react-router to the same version. – verdverm Nov 06 '19 at 23:12
1

If you are using typescript, needs to update the @types as well yarn upgrade @types/react-router-dom to ^5.1.2 – greensuisse Jan 10 '20 at 18:39
Hmm I only just installed react-router-dom without specifying a version, but I see it installed an old version 4.3.1. why would that happen? – Andy Mar 09 '20 at 17:58

score 6 · Answer 2 · answered Feb 24 '20 at 06:34

6

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

npm i react-router-dom@latest

answered Feb 24 '20 at 06:34

Maheshvirus

3,064
23
28

score 4 · Answer 3 · edited Feb 21 '20 at 10:11

4

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

edited Feb 21 '20 at 10:11

Savan Padaliya

720
6
20

answered Feb 21 '20 at 09:33

Zied Elati

41
1
4

score 3 · Answer 4 · answered Apr 15 '20 at 16:03

3

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

npm install react-router-dom@5.1.2 --save

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

answered Apr 15 '20 at 16:03

Pablo Salazar

401
4
10

score -1 · Answer 5 · answered Nov 20 '19 at 05:56

-1

You can not call hooks inside class-based component.

render() { let { path, url } = useRouteMatch(); ... }

answered Nov 20 '19 at 05:56

Konstantin Modin

608
4
10

score -7 · Accepted Answer · answered Oct 21 '19 at 13:07

Hooks cannot be used inside of a class component. You should refactor your code to be functional. Using the useState and useEffect hooks, you are still able to take advantage of component level state and component lifecycle.

Without the full code from that component I can't do this with your example.

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

6 Answers6