使用没有 Navigation mixin 的 router.transitionTo() React Router 1.0

Posted 2023-02-21

【中文标题】使用没有 Navigation mixin 的 router.transitionTo() React Router 1.0

【英文标题】：React Router 1.0 using router.transitionTo() without Navigation mixin

【发布时间】：2015-10-06 18:39:32

【问题描述】：

有没有更简单的方法可以从组件访问 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>
    );
  

【问题讨论】：

困惑，为什么不只是this.context.router？

ES6 中的上下文目前没有文档记录。您在构造函数的参数中接受上下文并将上下文传递给超级。然后您可以正常访问上下文。 this react-router issue中的代码示例。

谢谢@MatGessel！！我将在下面记录解决方案。

【参考方案1】：

根据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
;