Реагировать на контекст класса иногда, но не все

Question

Я очень новичок во всем этом (около трех дней), так что прости мое невежество.

Я использую комбинацию React, React-Router и React-Bootstrap. Как этот парень, я хочу объединить React-Router <Link /> и React-Bootstrap's <NavItem />функциональность, чтобы .active класс применяется к <li> элемент скорее (или так же) <a> элемент.

Что действительно расстраивает, так это то, что у меня это сработало, а потом оно прекратилось, когда я сделал, как мне показалось, какие-то несвязанные изменения (которые, я считаю, я отменил с тех пор).

Вот мой код:

listlink.js

import React from 'react';
import Router from 'react-router';
import classNames from 'classnames';

let Link = Router.Link;

let ListLink = React.createClass({
    contextTypes: {
        router: React.PropTypes.func
    },

    /* copied from React-Bootstrap's NavItem.js */
    propTypes: {
        onSelect: React.PropTypes.func,
        active: React.PropTypes.bool,
        disabled: React.PropTypes.bool,
        href: React.PropTypes.string,
        title: React.PropTypes.node,
        eventKey: React.PropTypes.any,
        target: React.PropTypes.string
    },

    render: function () {
        /* error happens here */
        let isActive = this.context.router.isActive(this.props.to);

        /* copied from React-Bootstrap's NavItem.js */
        let {
            disabled,
            active,
            href,
            title,
            target,
            children,
            ...props } = this.props;

        let classes = {
            'active': isActive,
            'disabled': disabled
        };

        return (
            <li { ...props } className={ classNames(props.classNames, classes) }>
                <Link to={ this.props.to }>{ this.props.children }</Link>
            </li>
        );
    }
});

module.exports = ListLink;

app.js

import React from 'react';
import Router from 'react-router';
import classNames from 'classnames';
import ListLink from '../components/listlink';
import BS from 'react-bootstrap';

/* ... */

let DefaultRoute = Router.DefaultRoute;
let Route = Router.Route;
let RouteHandler = Router.RouteHandler;

let Nav = BS.Nav;
let Navbar = BS.Navbar;

let App = React.createClass({
    render: function () {
        return (
            <div>
                <Navbar brand={this.props.toonName} fixedTop>
                    <Nav bsStyle='tabs'>
                        <ListLink to="toon">Character</ListLink>
                        <ListLink to="spell-book">Spell Book</ListLink>
                        <ListLink to="on-your-turn">On Your Turn</ListLink>
                        <ListLink to="battle" disabled={true}>Battle</ListLink>
                    </Nav>
                </Navbar>
                <RouteHandler />
            </div>
        );
    }
});

let routes = (
    <Route name="app" path="/" handler={App} toonName="Ivellios">
        <Route name="toon" handler={Toon} />
        <Route name="spell-book" handler={SpellBook} />
        <Route name="on-your-turn" handler={OnYourTurn} />
        <Route name="battle" handler={Battle} />
        <DefaultRoute handler={Toon} />
    </Route>
);

Router.run(routes, function (Handler) {
    React.render(<Handler toonName="Ivellios" />, document.body);
});

module.exports = App;

Когда я устанавливаю точку останова на let isActive =... в listlink.js, это ломается 5 раз, один раз для каждого <ListLink> а затем в пятый раз, где this.props.to является toon снова. Это пятый раз, когда this.context.router является undefinedи ссылки .isActive выдает ошибку.

Я думал, может быть, это из-за <DefaultRoute /> объявление, но это не так (комментирование строки не имеет значения). Независимо от того, какой /#/[page] в URL, это всегда toon на пятой итерации, и она всегда терпит неудачу с одной и той же ошибкой.

Uncaught TypeError: Cannot read property 'isActive' of undefined

Я не знаю, как отлаживать это дальше. Идеи?