CODEWITHSUNDEEP
reactjsreact-routerreact-hooks
Dharman Arjunan
Dharman Arjunan

Reputation: 101

Invalid hook call for using useHistory, useLocation hooks

App.js:

import React from 'react';
import { Router, Route } from 'react-router-dom';
import Display from './Components/Display';

export function App() {
  return (
    <Router>
      <Route path="/" component={Display} />
    </Router>
  );
}

Display.js

import React from 'react';
import { useLocation, useHistory } from 'react-router-dom';

function History() {
  let history = useHistory(); // error saying invalid hook call
  let location = useLocation();
  console.log(history);
  return <h2>Hello Display</h2>;
}

export default History;

I am facing invalid hook calls on using those hooks.

This is my dependencies :

"dependencies": {
  "@testing-library/jest-dom": "^4.2.4",
  "@testing-library/react": "^9.3.2",
  "@testing-library/user-event": "^7.1.2",
  "axios": "^0.19.2",
  "react": "^16.13.1",
  "react-dom": "^16.13.1",
  "react-redux": "^7.2.0",
  "react-router": "^5.1.2",
  "react-scripts": "3.4.1",
  "redux": "^4.0.5"
}

Upvotes: 10

Views: 18011

Answers (8)

jennyfofenny
jennyfofenny

Reputation: 4365

In my case, VSCode had chosen the wrong import when I auto-imported. It was using the useLocation hook in react-router when it should've been using react-router-dom.

Upvotes: 0

MR SHR47
MR SHR47

Reputation: 109

I faced the same problem today. Tried to find out the solutions here, but none of them worked.

At last, I just downgraded the version of "react-router-dom" from "5.3.0" to "5.2.0", and boom, its working fine.

The command for 5.2.0 is,

yarn add [email protected]

I'm using "react": "^17.0.2" and "react-dom": "17.0.2" with react-router-dom 5.2.0

This problem occurs whenever I add another package. After adding a package, it automatically upgrade the version. Then I have to downgrade it everytime. Stay careful whenever you install a package.

Upvotes: 0

amiellion
amiellion

Reputation: 131

In my case, I solved the issue by adding resolutions in package .json

"resolutions": {
    "babel-loader": "8.1.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-router-dom": "5.3.0"
}

Upvotes: 3

Abdulla Ababakre
Abdulla Ababakre

Reputation: 413

in my case , I used the useHistory in the event handlers .

when I remove let history = useHistory(); line of code from the event handlers , the problem solved.

There are some restrictions about how to use hooks in ReactJs.

🔴 Do not call Hooks in class components.

🔴 Do not call in event handlers.

🔴 Do not call Hooks inside functions passed to useMemo, useReducer, or useEffect.

For more , you can read this Invalid Hook Call Warning

Upvotes: 0

ritz
ritz

Reputation: 5677

I faced the exact same issue while upgrading from React 16 to React 17. It is caused by "mismatching versions of React and the renderer (such as React DOM)". I upgraded all the dependencies and it started working. Following list of dependencies worked for me.

"dependencies": {
  "@material-ui/core": "^4.9.10",
  "@material-ui/icons": "^4.9.1",
  "@material-ui/lab": "^4.0.0-alpha.50",
  "@testing-library/jest-dom": "^5.12.0",
  "@testing-library/react": "^11.2.6",
  "@testing-library/user-event": "^13.1.5",
  "formik": "^2.1.4",
  "loadjs": "^4.2.0",
  "lodash": "^4.17.15",
  "history": "^5.0.0",
  "prop-types": "^15.7.2",
  "pure-react-carousel": "^1.27.0",
  "react": "^17.0.2",
  "react-addons-css-transition-group": "^15.6.2",
  "react-dom": "^17.0.2",
  "react-render-html": "^0.6.0",
  "react-router-dom": "^5.2.0",
  "react-scripts": "^4.0.3",
  "web-vitals": "^1.0.1",
  "yup": "^0.28.3"
}

PS: I was using "yarn workspaces" with multiple react projects. Each having different list of dependencies. I had to separate one project to make it work and reach this conclusion.

Upvotes: 0

Sebastian Wrzalek
Sebastian Wrzalek

Reputation: 131

In my case I was using React Element instead React Component, this was the reason why useHistory() hook was throwing an error.

Upvotes: 0

Ymin Hu
Ymin Hu

Reputation: 769

I downgraded my react version to 16.14.0 and now it works. the react 17.0 seems to be broken with react-router-dom

Upvotes: 0

Shubham Khatri
Shubham Khatri

Reputation: 281676

You are using Router component from react-router-dom without providing a custom history object.

You can either use BrowserRouter or provide a custom history prop

import React from 'react';
import { BrowserRouter as Router, Route} from 'react-router-dom';
import Display from './Components/Display';

export  function App() {


  return (
    <Router>
        <Route path="/" component={Display } />
    <Router>
  )
}

Display.js

import React from 'react';
import { useLocation, useHistory } from 'react-router-dom'

function History() {
    let history = useHistory();
    let location = useLocation();
    console.log(history)
    return<h2>Hello Display</h2>
}

export default History

Upvotes: 1

Related Questions