Question

我使用webpack，ES6，react-router库和Link组件作为我的链接。我想＆＃34;过境＆＃34;与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;
  }
};

Answer 1

您的代码使用旧的路由器API。 API从0.13变为1.0.0RC。

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

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

要从NavBar方法转换到另一个网址：

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

请参阅History Mixin API。

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

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

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

Answer 2

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

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

Answer 3

您对contextTypes的定义看起来不对。它应该是

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

Answer 4

在React Router 1.0中，context上没有路由器了。它被location替代：

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

您可以在Upgrade Guide中找到有关1.0版本更改的更多信息。

此外，您没有transitionTo使用history并执行以下操作：this.history.pushState(null, '/somePath')。请务必查看升级指南。

Answer 5

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

React-router：＆＃34;无法读取属性＆＃39; transitionTo＆＃39;未定义＆＃34;

5 个答案: