反应-路由器这是未定义的

Question

未定义的TypeError:无法读取未定义的属性“分派”

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

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

这是从我的电话下游到

This.context.transitionTo(“某某物”)；

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

下面是调用代码的组件：

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走了一条路(完全摆脱了混频器)，然后决定“解除”混频器。