React-router：“无法读取未定义的属性'transitionTo'”答案

【问题标题】：React-router: "Cannot read property 'transitionTo' of undefined"React-router：“无法读取未定义的属性'transitionTo'”
【发布时间】：2016-01-31 00:12:36
【问题描述】：

我使用webpack、ES6、react-router 库和Link 组件作为我的链接。我想用链接元素的父 div “过境”，但是当我点击 div 时出现错误：

Uncaught TypeError: Cannot read property 'transitionTo' of undefined

我关注了this 和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;
  }
};

【问题讨论】：

您使用的是哪个版本的 react-router？另外，router: function contextType() { ... } 应该是 router: React.PropTypes.func.isRequired。
我用1.0.0-rc3版本

标签： reactjs react-router

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

你可以在Upgrade Guide找到更多关于1.0版本的变化。

也没有transitionTo，您可以使用history 并执行以下操作：this.history.pushState(null, '/somePath')。一定要查看升级指南。

【讨论】：

【解决方案3】：

router 在 1.0 版本中已从上下文中删除（请参阅upgrade doc here）现在在上下文中您有history 和location（请参阅here）。试试这个：

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

【讨论】：

【解决方案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,
};

【讨论】：

在 ES6 中 Mixins 不是被移出 React 了吗？
@NickPineda 目前没有摆脱 mixins 的计划。虽然作为 ES6 类或纯函数的组件确实不支持 mixin，但还有其他方法可以实现类似 mixin 的功能。见medium.com/@dan_abramov/…。

【解决方案5】：

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