Cannot read property 'history' of undefined (useHistory hook of React Router 5) : <p>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.</p>

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

<p><code>Uncaught TypeError: Cannot read property 'history' of undefined</code></p>

<p>which is caused by this line in React-router</p>

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

  return useContext(context).history; &lt;---------------- ERROR IS ON THIS LINE !!!!!!!!!!!!!!!!!
}
</code></pre>

<p>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.</p>

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

<p>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.</p>

<pre><code>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(() =&gt; {
        i18n.changeLanguage(language);
    }, []);

    return(
        &lt;Router&gt;
            &lt;Route path="/"&gt;
                &lt;div className={testClass}&gt;HEADER&lt;/div&gt;
            &lt;/Route&gt;
        &lt;/Router&gt;
    )
}

</code></pre>
