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

score 36 · Answer 1 · edited Jul 19 '23 at 09:36

36

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

React Router Upgrading from v5

edited Jul 19 '23 at 09:36

greybeard

2,249
8
30
66

answered Nov 17 '21 at 23:18

Adam Youngers

6,421
7
38
50

Thanks. That's what solved it for me. – Jason Vasilev Nov 30 '21 at 14:42
3

The new `useMatch` function takes a pattern argument. Any idea how to get the 'current' pattern? – wensveen Feb 02 '22 at 08:45
3

The guide is not reachable, so if you can update the answer with an example, this would help a lot. Thanks. – Arefe Mar 14 '22 at 10:39
I submitted an edit. The correct link is https://reactrouter.com/en/main/upgrading/v5#replace-useroutematch-with-usematch – Grant Curell Jul 18 '23 at 23:36

score 20 · Answer 2 · answered Oct 16 '19 at 12:35

20

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

734
4
12

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
https://reactrouter.com/en/6.10.0/upgrading/v5#replace-useroutematch-with-usematch – edallme Apr 07 '23 at 14:14

score 6 · Answer 3 · 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

6,749
2
38
40

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

6

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

800
10
17

score 4 · Answer 5 · 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

828
1
11
22

answered Feb 21 '20 at 09:33

Zied Elati

61
1
4

score 0 · Answer 6 · answered Dec 23 '22 at 01:29

For anyone who finds this thread because they are attempting to implement 'useRouteMatch' to nest routes in child components, the short answer is that React Router has made updates in v 6.6.0 that are worth getting the scoop on.

Read Here: https://reactrouter.com/en/6.6.0/upgrading/v5#relative-routes-and-links

The Route Path is now relative meaning that it is automatically implied in your route code in your child component:

import React from 'react';
import { BrowserRouter, Link, Route, Routes } from 'react-router-dom';

function App() {
    return (
      <div>
        <h1>Marine Mammals</h1>
        <BrowserRouter>
          <Routes>
              <Route path='/whale/*' element={<Whale />} />
          </Routes>        
        </BrowserRouter>
      </div>
    );
  }

function Whale() {

  return (
    <>
      <h2>Whale</h2>
      <Routes>
        <Route path='beluga' element={<Beluga />} />
        <Route path='blue' element={<Blue />} />
      </Routes>
    </>
  );
}

In App(), an asterisk is added in the path for whale like so: "whale/*".

In Whale(), we no longer need to add anything other than what would replace the '*' like so: path='blue'

The source code comes from a tutorial by DigitalOcean (it's a good tutorial but outdated): https://www.digitalocean.com/community/tutorials/how-to-handle-routing-in-react-apps-with-react-router

score -11 · 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'

7 Answers7