React class context set sometimes but not all - reactjs

Question

I'm very new to all of this (about three days in), so forgive my ignorance.
I'm using a combination of React, React-Router, and React-Bootstrap. Like this guy, I want to combine React-Router's <Link /> and React-Bootstrap's <NavItem />'s functionality so that the .active class is applied to the <li> element rather (or as well as) the <a> element.
What's really frustrating is I had this working, and then it stopped when I made, what seemed to me, some unrelated changes (that I believe I've undone, since).
Here's my code:
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;
When I set a breakpoint at let isActive =... in listlink.js, it breaks 5 times, one time for each <ListLink> and then a fifth time where this.props.to is toon again. It's this fifth time where this.context.router is undefined, and referencing .isActive throws an error.
I thought maybe it was because of the <DefaultRoute /> declaration, but that doesn't seem to be the case (commenting the line out doesn't make a difference). Regardless of which /#/[page] is in the URL, it's always toon on the fifth iteration, and it always fails with the same error.
Uncaught TypeError: Cannot read property 'isActive' of undefined
I don't know how to debug this any further. Ideas?