Cannot read property 'history' of undefined (useHistory hook of React Router 5)

Question

I am using the new useHistory hook of React Router, which came out a few weeks ago. My React-router version is 5.1.2. My React is at version 16.10.1. You can find my code at the bottom.

Yet when I import the new useHistory from react-router, I get this error:

Uncaught TypeError: Cannot read property 'history' of undefined

which is caused by this line in React-router

function useHistory() {
  if (process.env.NODE_ENV !== "production") {
    !(typeof useContext === "function") ? process.env.NODE_ENV !== "production" ? invariant(false, "You must use React >= 16.8 in order to use useHistory()") : invariant(false) : void 0;
  }

  return useContext(context).history; <---------------- ERROR IS ON THIS LINE !!!!!!!!!!!!!!!!!
}

Since it is related to useContext and perhaps a conflict with context is at fault, I tried completely removing all calls to useContext, creating the provider, etc. However, that did nothing. Tried with React v16.8; same thing. I have no idea what could be causing this, as every other feature of React router works fine.

***Note that the same thing happens when calling the other React router hooks, such as useLocation or useParams.

Has anyone else encountered this? Any ideas to what may cause this? Any help would be greatly appreciated, as I found nothing on the web related to this issue.

import React, {useEffect, useContext} from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import { Switch, useHistory } from 'react-router'
import { useTranslation } from 'react-i18next';

import lazyLoader from 'CommonApp/components/misc/lazyLoader';
import {AppContext} from 'CommonApp/context/context';

export default function App(props) {
    const { i18n } = useTranslation();
    const { language } = useContext(AppContext);
    let history = useHistory();

    useEffect(() => {
        i18n.changeLanguage(language);
    }, []);

    return(
        <Router>
            <Route path="/">
                <div className={testClass}>HEADER</div>
            </Route>
        </Router>
    )
}

Brian Thompson · Accepted Answer · 2019-11-18T14:30:20.327

73

Its because the react-router context isn't set in that component. Since its the <Router> component that sets the context you could use useHistory in a sub-component, but not in that one.

edited Nov 18 '19 at 14:30

answered Oct 03 '19 at 15:01

Brian Thompson

8,589
1
16
27

1

Thank you Brian. That was indeed the cause of the issue. :) – Radu Sturzu Oct 17 '19 at 14:46
they should use just `useState` `useContext` just complicated thing – pery mimon Oct 21 '20 at 11:40
...And the solution might be to lift the Router up. – x-yuri Mar 22 '21 at 10:52

score 19 · Answer 2 · answered Nov 17 '19 at 16:19

19

Note to other people that run into this problem and already have wrapped the component with Router component. Make sure that Router and the useHistory hook are imported from the same package. The same error can be thrown when one of them are imported from react-router and the other one from react-router-dom and the package versions of those packages don't match. Don't use both of them, read about the difference here.

answered Nov 17 '19 at 16:19

Lenny Laughter

486
4
14

4

Why is this answer at the bottom even though it has most upvotes? Thanks a lot for help! – Ondřej Ševčík Sep 12 '20 at 15:36

Khwaja Abdul Ahad · Answer 3 · 2020-07-01T18:40:56.837

7

useHistory won't work in the component where you have your Routes because the context which is needed for useHistory is not yet set.

useHistory will work on any child component or components which your have declared in your Router but it won't work on Router's parent component or Router component itself.

edited Jul 01 '20 at 18:40

answered Jun 17 '20 at 13:12

Khwaja Abdul Ahad

99
1
4

score 3 · Answer 4 · answered Jun 11 '20 at 15:50

The solution is:

in the Main (father) component

import { BrowserRouter } from "react-router-dom";

<BrowserRouter><App /></BrowserRouter>

in the child component (App)

import { withRouter } from "react-router-dom";


function App(props) {
    const { i18n } = useTranslation();
    const { language } = useContext(AppContext);
    let history = useHistory();

    useEffect(() => {
        i18n.changeLanguage(language);
    }, []);

    return(

            <Route path="/">
                <div className={testClass}>HEADER</div>
            </Route>

    )
}

export default withRouter(App);

`withRouter()` doesn't seem to be needed. The example can be significantly reduced and improved (e.g. `onClick={history.replace(...)}`). — x-yuri, Mar 22 '21 at 10:50

score 2 · Answer 5 · answered Feb 28 '20 at 10:04

2

I updated my react-router-dom from 5.0.0 to ^5.1.2 and it's been solved. You may notice that the useHistory is in a sub-component.

answered Feb 28 '20 at 10:04

Ati Barzideh

71
4

score 1 · Answer 6 · edited Mar 24 '21 at 05:27

Use BrowserRouter.

import {
  BrowserRouter as Router,
  Route,
  Switch,
} from 'react-router-dom';

If you use Router, then you need to specify a history for it:

import {
  Router,
  Route,
  Switch,
} from 'react-router-dom';

// Ensure you destructure the createBrowserHistory object
import { createBrowserHistory } from 'history';

const history = createBrowserHistory();
return (
  <Router history={history} >
    ...
  </Router>
);

Cannot read property 'history' of undefined (useHistory hook of React Router 5)

6 Answers6

Linked

Related