React router transitionTo, .substring is not a function

I have some simple components, and I want to use the router.transitionTo function. What am I doing wrong here:

const { Router,
        Route,
        IndexRoute,
        Redirect,
        Link,
        IndexLink
      } = ReactRouter

const Person = React.createClass({

  render() {
    return (
      <div>
      hihihi  
      </div>
    )
  }
})
const App = React.createClass({
  clickHandler() {
    this.context.router.transitionTo('/person/23')
  },
  render() {
    return (
      <div>
        <h1 onClick={this.clickHandler}>React Router Playground</h1>
        {this.props.children}
      </div>
    )
  }
})

App.contextTypes = {
  router: React.PropTypes.object.isRequired,
}

React.render((
  <Router>
    <Route path="/" component={App}/>
    <Route path="/person/:id" component={Person}/>
  </Router>
), document.getElementById('app'))

http://codepen.io/anon/pen/MyerXj?editors=001