使用router.transitionTo()而不使用Navigation mixin来实现路由器1.0

Question

是否有更简单的方法Router从组件访问对象来执行调用transitionTo()而不使用Navigation mixin？这是ES6组件.目前在按钮点击等事件上,我一直在写这样的事情:

class Button extends React.Component {
  handleClick(e) {
    e.preventDefault();
    var router = this._reactInternalInstance._context.router;
    router.transitionTo('/search');
  }

  render() {
    return (
      <button onClick={this.handleClick.bind(this)}>
        {this.props.children}
      </button>
    );
  }
}

Answer 1

Per Mat Gessel的评论,在构造函数中添加上下文作为参数将使您可以访问路由器.

class Button extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.context = context;      
  }

  handleClick(e) {
    e.preventDefault();
    this.context.router.transitionTo('/search');
  }

  render() {
    return (
      <button onClick={this.handleClick.bind(this)}>
        {this.props.children}
      </button>
    );
  }
}

Button.contextTypes = {
  router: React.PropTypes.object.isRequired
};