React routing throws error:Cannot read property 'push' of undefined for Browser router

Question

I have a code where i need to show home page after clicking the button.When i call the same route '/Sub' in other page,it is working. But here it throws Cannot read property 'push' of undefined

Routes.js :

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

const Routes = () => (
    <BrowserRouter>
        <Switch>
            <Route exact path='/' component={Addpage} />
            <Route path='/New' component={Details} />
            <Route path='/Sub' component={Displaydata} />
        </Switch>
    </BrowserRouter>
) 
export default Routes;

Here is the UI code :

class Displaypage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            Pageid: 1
        }
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleAddNew = this.handleAddNew.bind(this);
    }

    handleSubmit = s => {
        s.preventDefault();
        const Pageid = this.state.Pageid;
        this.props.history.push({
            pathname: "/Sub",
            state: {
                Pageid: this.state.Pageid;
            }
        });
    }

    render() {
        const submitbutton = <button onClick={this.handleSubmit}>Submit</button>
        return (
            <div >
                {submitbutton}
            </div>
        );
    }
}
export default Displaypage;

can you explain me where should i define other than the class — shiju, Oct 08 '19 at 14:29
Have a look at this post for withRouter, https://stackoverflow.com/questions/53539314/what-is-withrouter-for-in-react-router-dom — SuleymanSah, Oct 08 '19 at 14:31

score 0 · Accepted Answer · answered Oct 08 '19 at 14:32

Have you defined your compoenent with https://reacttraining.com/react-router/web/api/withRouter ?

import { withRouter } from "react-router"

class Displaypage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            Pageid:1
}            
        this.handleSubmit=this.handleSubmit.bind(this);
        this.handleAddNew = this.handleAddNew.bind(this);
    }

handleSubmit = s => {
        s.preventDefault();
        const Pageid = this.state.Pageid;
        this.props.history.push({
            pathname: "/Sub",
            state: {
                Pageid: this.state.Pageid;
            }
        });
    }
     render() {

const submitbutton = <button onClick={this.handleSubmit}>Submit</button>

return (
            <div >                              
                {submitbutton}              

            </div>
        );

}
}   

const DisplaypageWithRouter = withRouter(Displaypage)

export default DisplaypageWithRouter;

Karthik R · Answer 2 · 2019-10-09T00:15:53.510

0

I'm not sure if its a typo, but the component name is Displaypage whereas the routed component is to Displaydata?

Apart from that, I don't see anything wrong and should work as is. As other answers suggest, withRouter isn't needed for a direct component under Router.

**Route props All three render methods will be passed the same three route props

match location history **

edited Oct 09 '19 at 00:15

answered Oct 08 '19 at 14:37

Karthik R

5,523
2
18
30

Yes its a typo. It works only after including withRouter – shiju Oct 08 '19 at 15:38
I understand its works, but an immediate component being rendered under a router, by default has match, history and location props. Unless the component name is not a typo. – Karthik R Oct 09 '19 at 00:15

React routing throws error:Cannot read property 'push' of undefined for Browser router

2 Answers2