未捕获的TypeError:this.context.router.push不是函数

时间:2016-01-12 01:32:27

标签: javascript reactjs components react-router

就像调用帖子一样,这就是我从浏览器控制台获得的内容。 单击下拉按钮后尝试更改为配置文件页面。 代码:

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

编辑路线已添加。

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>
);

1 个答案:

答案 0 :(得分:1)

如果您使用的是最新的react-router v4,则此问题的解决方案需要:

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

新的react-router v4在访问this.context.router时更改了push方法的位置。路由器现在具有历史和路由作为属性,并且在历史记录中您将找到已分配的方法。

这可能不适合旧版本,因为v4已经重写并且不向后兼容。由于这个问题是第一个出现在谷歌搜索中的关键词:

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

我在另一个线程上回答了类似的问题,我决定在此处添加相同的解释,以防任何未来的开发人员首先出现在这里。