reactjs - React クラスのコンテキストが時々設定されますが、すべてではありません

Question

私はこれらすべてに非常に慣れていないため（約3日で）、私の無知を許してください.

React、React-Router、React-Bootstrap を組み合わせて使用​​しています。この男のように、React-Router<Link />と React-Bootstrap の<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、それぞれ 1 回、5 回目の 5 回ブレークします。が であるのは今回で 5 回目であり、参照するとエラーがスローされます。<ListLink>this.props.totoonthis.context.routerundefined.isActive

宣言のせいかなと思ったの<DefaultRoute />ですが、そうではないようです（行をコメントアウトしても違いはありません）。/#/[page]URL にどちらが含まれているかに関係なく、常にtoon5 回目の反復であり、常に同じエラーで失敗します。

Uncaught TypeError: Cannot read property 'isActive' of undefined

これ以上デバッグする方法がわかりません。アイデア？