react-router这是未定义的

Question

未捕获的TypeError：无法读取未定义的属性“ dispatch”

这发生在ReactRouter.js中的handleLocationChange中：

      handleLocationChange: function handleLocationChange(change) {
        this.dispatch(change.path, change.type);
      },

这是我打电话给的下游

this.context.transitionTo（'something'）;

其中“某物”是我定义的路线之一。 为什么“ this”是不确定的？

这是我的组件调用代码：

var React = require("react");
var Router = require("react-router");
var { Link } = Router;
var Button = require('core-ui').Button;

var AppointmentsHeader = React.createClass({
    mixins: [React.addons.PureRenderMixin],
    contextTypes: {
        router: React.PropTypes.func
    },

    render: function () {
        console.log("AppointmentsHeader:render");
        var router = this.context.router;
        // default to hidden
        var displayClassInline = "appointments-hide"; // hide/show this element if the current page is Landing Page

        if (this.props.currentState.get('currentState') === "landingPage")
        {
            displayClassInline = "appointments-block-show";
        }
        return (
            <div className={"appointments-header cv-grid " + displayClassInline}>
                <div className="appointments-title">Appointments</div>
                <Button label="Create Appointment Event" style="primary" onClick={this._onClick}/>
            </div>
        );
    },
    _onClick: function() {
        console.log("AppointmentsHeader 'Create Appointment Event' button clicked");
        var newStatus = this.props.currentState.set('currentState', "CreateAppointment");
        this.props.handleChange(newStatus);
        this.context.transitionTo('createAppointmentsEvent');
    }
});

module.exports = AppointmentsHeader;

Answer 1

这行：

this.context.transitionTo('createAppointmentsEvent')

---

应该：

this.context.router.transitionTo('createAppointmentsEvent');

要么

this.transitionTo('createAppointementsEvent')

---

在示例中，您将通过两种不同的方式访问单例路由器：

• 导航混合
• 通过contextTypes哈希注入的路由器

该API现在非常混乱，因为Ryan走了一条路（完全摆脱了mixins），然后决定“滥用” mixins。