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

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.1https://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 2

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

npm i react-router-dom@latest

Answer 3

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

Answer 4

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.

Answer 5

However, I have another question you can help. I have a hook error. Here is my code, do you have an idea?

Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

Here is my render function

 render() { let { path, url } = useRouteMatch(); const Products = this.displayProducts(); const Edition = this.displayEdition(); return ( <div className={this.state.editionProduct? 'catalog edit': 'catalog'}> <h1>Catalog</h1> <Switch> <Route exact path={`${path}/list`}> <ul className='catalog-list'> {Products} </ul> </Route> <Route path={`${path}/edit`}> <Edition saveProductHandler={this.saveProductHandler} closeEdition={this.closeEdition} product={this.state.editionProduct} /> </Route> </Switch> </div> ); }

Answer 6

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 7

You can not call hooks inside class-based component.

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

Answer 8

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.