反应路由器这是未定义的

Question

Uncaught TypeError: Cannot read property 'dispatch' of undefined

这发生在 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')

---

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

• Navigation mixin
• 通过contextTypes 哈希注入的路由器

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