反应路由器："Cannot read property 'transitionTo' of undefined"

Question

我为我的 link 使用 webpack、ES6、react-router 库和 Link 组件。我想 "transit" 与 link 元素的父级 div，但是当我单击 div 时，出现错误：

Uncaught TypeError: Cannot read property 'transitionTo' of undefined

我关注了 and this 话题。

NavBar.jsx

var React = require('react');
var Router = require('react-router');
var { Route, DefaultRoute, RouteHandler, Link } = Router;

var CustomersIcon = require("./icons").CustomersIcon;

export class NavBar extends React.Component {

  constructor(props, context) {
      super(props, context);
  }

  _openLink() {
      this.context.router.transitionTo('/');
  }

  render() {
    return (
         <div className="menu-item-wrapper" onClick={this._openLink.bind(this)}>
             <CustomersIcon />
             <Link to="/customers" activeClassName="active" ref="customersLink">Customers</Link> 
          </div>
    );     
  }
}

NavBar.contextTypes = {
  router: function contextType() {
    return React.PropTypes.func.isRequired;
  }
};

Answer 1

您对 contextTypes 的定义看起来有误。应该是

NavBar.contextTypes = {
  router: React.PropTypes.func.isRequired
};

Answer 2

在 React Router 1.0 中，context 上不再有路由器。它被替换为 location:

NavBar.contextTypes = {
  location: React.PropTypes.object
}

您可以在 Upgrade Guide.

中找到更多关于 1.0 版本变化的信息

也没有 transitionTo 你会使用 history 并做类似的事情：this.history.pushState(null, '/somePath')。务必查看升级指南。

Answer 3

router 在 1.0 版本中从上下文中删除（参见 upgrade doc here) Now in context you have history and location (see here）。试试这个：

this.context.history.pushState(null, '/');
//...
NavBar.contextTypes = {
  history: React.PropTypes.object.isRequired,
};

Answer 4

您的代码使用旧路由器 API。 API 从 0.13 到 1.0.0RC 变化很大。

您想从上下文中检索 history 对象：

NavBar.contextTypes = {
  history: React.PropTypes.object.isRequired,
};

并从 NavBar 方法转换到另一个 url：

this.context.history.pushState(null, '/');

参见 History Mixin API。

您还可以使用库公开的 history propType 指定更精确的 history contextType：

var RouterPropTypes = require('react-router').PropTypes;

Navbar.contextTypes = {
  history: RouterPropTypes.history,
};

Answer 5

提供了使用 react-router 2.0.0 以编程方式重定向的方法。

反应路由器："Cannot read property 'transitionTo' of undefined"

React-router: "Cannot read property 'transitionTo' of undefined"

reactjs

react-router