Question

内部课程

C:\Users\DOLAN~1.ADS\AppData\Local\Temp\TsfwadjjTbJ8iT-OZ3Y1_z3L.gif
<Buffer 47 49 46 38 39 61 5c 00 16 00 d5 36 00 bc d8 e4 fe fe ff ae cf df dc ea f1 fd fe fe db e9 f1 ad ce de 46 5a 71 2b 38 50 90 b8 cc 4a 5f 76 9a c3 d7 8f ... >

在组件的底部

constructor(props, context) {
super(props, context);

someFn = () = {    
    this.context.router.transitionTo('google.com');
}

我一直收到错误警告：失败的上下文类型：MyComponent.contextTypes = { router: React.PropTypes.func.isRequired };中未指定必需的上下文router。

当我点击按钮进行导航时，我收到以下附加错误未捕获的TypeError：无法读取未定义的属性Homepage

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

transitionTo

Answer 1

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

下面应该可以帮助你=＆gt;

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>
    );
  }
}

Answer 2

我在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;
  }
}

Answer 3

我在下面尝试并正常工作。我的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)} />;
    }
}

反应ES6类转换不起作用

3 个答案: