Invalid hook call for using useHistory, useLocation hooks

Question

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"
}

Answer 1

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"
}

Answer 2

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