CODEWITHSUNDEEP
javascriptreactjscomponentsreact-router
frammnm
frammnm

Reputation: 537

Uncaught TypeError: this.context.router.push is not a function

Just as the post is called that's what I get from the browser console. Trying to change to a profile page after I click a dropdown button. Code : 

contextTypes: {
    router: React.PropTypes.func
},
_handleProfile: function(e){
    this.context.router.push("profile");
},


<NavDropdown eventKey={3} title={this.props.email} id="collapsible-nav-dropdown">
    <MenuItem eventKey={1}>
        <Button className="dropdown-button" onClick={this._handleProfile} bsSize="small">
            Profile
        </Button>
    </MenuItem>
    <MenuItem divider />
    <MenuItem eventKey={2}>
        <Button  className="dropdown-button" onClick={this._handleLogout} bsSize="small">
            Logout
        </Button>
    </MenuItem>
</NavDropdown>


Using React.createClass,react-bootstrap,react-router

Edit: routes added.

var Router = (
    <Route name="app" path="/" handler={app}>
        <DefaultRoute handler={Index} />
        <Route name="login" path="login" handler={Login} />
        <Route name="profile" path="profile" handler={Profile} />
    </Route>
);

Upvotes: 1

Views: 3828

Answers (1)

hanorine
hanorine

Reputation: 7825

If you are using the latest react-router v4 the solution for this issue requires: 

this.context.router.history.push('/path');

The new react-router v4 has changed the location of the push method when accessing this.context.router. router now has history and route as properties and it is within history that you will find the allocated method.

This might not be suitable for older versions as v4 had been a rewrite and is not backwards compatible. Due to this issue being the first one to come up in the a google search with the key words: 

Uncaught TypeError: this.context.router.push is not a function

and i had answered a similar issue on another thread i have decided to add the same explanation here in case any future developer might comes along here first.

Upvotes: 1

Related Questions