react-router context issue

AppHandler.js

import React from 'react';
import { RouteHandler } from 'react-router';

let AppHandler = React.createClass(
  render() {
    return (
      <div>
        ...
        <div>
          <RouteHandler />
        </div>
      </div>
    );
  },

});

export default AppHandler;

Login.js

'use strict';

import React from 'react';

let Login = React.createClass({

  contextTypes: {
    flux: React.PropTypes.object.isRequired,
    router: React.PropTypes.func.isRequired,
  },
  
  getInitialState() {
    return({
      username: "[email protected]",
      password: ''
    });
  },

  async onLogin(event) {
    event.preventDefault();
    this.sessionActions = this.context.flux.getActions('session');
    console.log(await this.sessionActions.getToken());
  },

  onUsernameChange(event) {
    this.setState({
      username: event.target.value
    });
  },

  onPasswordChange(event) {
    this.setState({
      password: event.target.value
    });
  },
  
  render() {
    console.log(this.context.router);
    return(
      <div className="Login">
        <h3>Login</h3>
        <p>Forgot your password?</p>
        <form onSubmit={this.onLogin}>
          ...

        </form> 
      </div>
    );
  }
});

export default Login;

routes.js

import React from 'react';
import { Route, DefaultRoute } from 'react-router';
import AppHandler from './components/AppHandler';

import Login from './components/Session/Login';
import Logout from './components/Session/Logout';
import Dashboard from './components/Dashboard';

let Routes = (
  <Route name="app" path="/" handler={AppHandler}>
    <Route name="login" path="/login" handler={Login} />
    <Route name="logout" path="/logout" handler={Logout} />
    <Route name="dashboard" path="/dashboard" handler={Dashboard} />
  </Route>
);

export default Routes;

that's weird ... this works for me with [email protected]

var React = require('react');
var Router = require('react-router');
var { Route, RouteHandler, Link } = Router;

class App extends React.Component {
  render () {
    return (
      <div>
        <h1>Hi</h1>
        <ul>
          <li><Link to="/123">123</Link></li>
          <li><Link to="/456">123</Link></li>
        </ul>
        <RouteHandler/>
      </div>
    );
  }
}

class FooView extends React.Component {
  render () {
    console.log(this.context.router);
    var id = this.context.router.getCurrentParams().id;
    return (
      <div>
        <h2>{id}</h2>
      </div>
    );
  }
}

FooView.contextTypes = {
  router: React.PropTypes.func
};

var Foo = React.createClass({
  contextTypes: {
    router: React.PropTypes.func
  },

  render () {
    console.log(this.context.router);
    return <FooView/>;
  }
});

var routes = (
  <Route handler={App}>
    <Route path=":id" handler={Foo}/>
  </Route>
);

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