React ES6类转换不工作

React ES6 Class transitionTo Not Working

本文关键字：工作 转换 ES6 React      更新时间：2023-09-26

内部类

constructor(props, context) {
super(props, context);
someFn = () = {    
    this.context.router.transitionTo('google.com');
}
组件 底部

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

我一直得到错误警告:失败的上下文类型:所需的上下文router没有在Homepage中指定。

当我点击按钮导航时，我得到以下额外的错误Uncaught TypeError: Cannot read property transitionTo of undefined

我甚至尝试在构造函数中添加以下内容，但无济于事

this.context = context

绝大多数应用程序不需要使用上下文。(参考:https://reactjs.org/docs/context.html)

下面应该会对你有所帮助=>

import {Component} from 'react';
import PropTypes from 'prop-types';
class MyComponent extends Component {
  static contextTypes = {
    router: PropTypes.object
  };
  onFormSubmit() {
    this.context.router.push('/home');
  }
  render() {
    return (
      <form onSubmit={this.onFormSubmit.bind(this)}>
      </form>
    );
  }
}

我在react-router github repo中问了同样的问题，并得到了答案https://github.com/rackt/react-router/issues/2107

要点:history取代旧的router 

class Component extends React.Component {
  static contextTypes= {
    history: React.PropTypes.object,
    location: React.PropTypes.object
  }
  render() {
      console.log(this.context.history, this.context.location)
      return null;
  }
}

我在下面试了一下，工作正常。我的react-router是1.0.0-rc3。

export default class MyComponent extends React.Component {
    static contextTypes = {
        history: React.PropTypes.object
    }
    routeHandler() {
        this.context.history.pushState(null, '/test');
    }
    render() {
        return <button onClick={this.routeHandler.bind(this)} />;
    }
}
相关文章：