Cannot read property 'push' of undefined for react use history

Question

I'm very new to React and first time time trying to implement navigation to a new page by pushing it to the history but am stuck on this error Cannot read property 'push' of undefined for react use history for a couple of hours now and think I need some help or guidance please.

Here are my small mvp components (I'm using Hooks):

import React, {useEffect, useState} from 'react';
import {BrowserRouter as Router, Route, Switch, useHistory} from "react-router-dom";
import Report from "./components/Report";

function App() {

let history = useHistory();

function handleClick() {
    history.push("/report");
}

return (
    <Router>
        <Route path="/report" component={Report}/>
        <div>
            <button onClick={handleClick}>Click me</button>
        </div>

    </Router>
);
}

export default App

And

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

const Report = () => {

return (
    <div>Hello from report</div>
);

}

export default withRouter(Report)

Thank you very much.

Update

codesandbox.io/s/crazy-hill-1i6gb
I've added my complete code on the above link. The url now changes and no longer get the undefined error as per @Abir answer but the click me button still shows up rather than the text for the Report component.

Does this answer your question? [Uncaught TypeError: Cannot read property 'push' of undefined (React-Router-Dom)](https://stackoverflow.com/questions/44009618/uncaught-typeerror-cannot-read-property-push-of-undefined-react-router-dom) — izik, Sep 06 '20 at 07:52
Hi, thank you for the quick reply. I've actually gone through quite a few questions and answers at this moment and this one too. It seems to be asking me to use withRouter on the component I'm trying to navigate to but I have that so not sure what else I could be missing. — Francislainy Campos, Sep 06 '20 at 07:54
Can you share the codesandbox link? It will be easier to debug and understand root problem. — sidverma, Sep 06 '20 at 07:56
The problem here is to use hook `useHistory` outside of the ``, to fix this you just simply move them all in a component of a `` — tmhao2005, Sep 06 '20 at 07:58

Abir Taheer · Accepted Answer · 2020-09-06T08:17:25.860

13

The issue is because your Router component is nested inside of your App component rather than your App being nested inside of your router. The router acts as sort of a context provider and without your app being nested in the router the useHistory() hook has no provider to get the History from.

You can try something like this:

import React, {useEffect, useState} from 'react';
import {BrowserRouter as Router, Route, Switch, useHistory} from "react-router-dom";
import Report from "./components/Report";

function Content(){
    let history = useHistory();
    

    function handleClick() {
        history.push("/report");
    }
    
    return (
        <div>
            <button onClick={handleClick}>Click me</button>
        </div>
    )

}

function App() {

    return (
        <Router>
            <Route path="/report" component={Report}/>
            <Content />
        </Router>
    );
}

export default App

edited Sep 06 '20 at 08:17

answered Sep 06 '20 at 08:01

Abir Taheer

2,502
3
12
34

Hi, thank you for the gist. Yes, this opens the component but below the button. I'm actually trying to have it under its own page but It may be I may be missing some conceptual understanding here perhaps. – Francislainy Campos Sep 06 '20 at 08:10
@FrancislainyCampos Then you'd make it a route just like all the other pages (``) – Guy Incognito Sep 06 '20 at 08:17
https://codesandbox.io/s/crazy-hill-1i6gb – Francislainy Campos Sep 06 '20 at 08:27
I've added my complete code on the above link. The url changes but the click me button still shows up rather than the text for the Report component. – Francislainy Campos Sep 06 '20 at 08:28
That’s because you removed the for the “/report” path – Abir Taheer Sep 06 '20 at 08:31
1) now you don't have a route for `/report` and 2) the `/` route needs the `exact` prop. https://codesandbox.io/s/dawn-hill-g3tfk I suggest going through the manual or a tutorial again. – Guy Incognito Sep 06 '20 at 08:32
Thank you Guy. Yeah, I was almost getting to this answer but didn't have the exact component part. Thanks a lot. That fixed the issue. :) – Francislainy Campos Sep 06 '20 at 08:41
Thank you Abir too. Accepting your answer. Have a great day. – Francislainy Campos Sep 06 '20 at 08:42

Francislainy Campos · Answer 2 · 2020-09-06T11:13:05.387

1

As per the comments under the accepted answer here is the full gist of what worked to solve the issue.

import React from "react";
import { BrowserRouter as Router, Route, useHistory } from "react-router-dom";
import Report from "./components/Report";

function Content() {
let history = useHistory();

function handleClick() {
 history.push("/report");
}

return (
 <div>
    <button onClick={handleClick}>Click me</button>
 </div>
 );
}

function App() {
return (
 <Router>
   <Route path="/report" exact component={Report} />
   <Route path="/" exact component={Content} />
 </Router>
);
}

export default App;

And

import React from "react";

const Report = () => {
return <div>Hello from report</div>;
};

export default Report;

edited Sep 06 '20 at 11:13

answered Sep 06 '20 at 08:49

Francislainy Campos

3,462
4
33
81

One thing I'd like to add is that you don't need to wrap your Report component export using `withRouter`. The reason being that you're not doing anything inside of the Report component that requires receiving the router as a property. – Abir Taheer Sep 06 '20 at 09:30
Cool, thank you for highlighting that. – Francislainy Campos Sep 06 '20 at 11:12

Cannot read property 'push' of undefined for react use history

2 Answers2

Linked