Gmaps React Routing

demo.js

import React from 'react';
import Router, {RouteHandler, Route, DefaultRoute, Link} from 'react-router';
import {Gmaps, Circle} from 'react-gmaps';

const coords = {
  lat: 51.5258541,
  lng: -0.08040660000006028
}

const App = React.createClass({
  render() {
    return (
      <div>
        <Link to="home">home</Link>
        <Link to="test">test</Link>
        <RouteHandler/>
      </div>
    );
  }
});

const Map = React.createClass({

  getInitialState() {
    return {
      radius: 100
    }
  },

  handleClick() {
    const {radius} = this.state;
    this.setState({
      radius: radius * 2
    });
  },

  render() {
    const {radius} = this.state;
    return (
      <div>
        <Gmaps
          width={'400px'}
          height={'300px'}
          lat={coords.lat}
          lng={coords.lng}
          zoom={12}>
          <Circle
            strokeColor={'#F44336'}
            strokeOpacity={0.8}
            strokeWeight={2}
            fillColor={'#F44336'}
            fillOpacity={0.35}
            radius={radius}
            lat={coords.lat}
            lng={coords.lng} />
        </Gmaps>
        <button onClick={this.handleClick}>
          Click me!
        </button>
      </div>
    );
  }

});

const Test = React.createClass({
  render() {
    return (
      <div>Yo</div>
    );
  }
});

const routes = (
  <Route path="/" handler={App}>
    <DefaultRoute name="home" handler={Map} />
    <Route name="test" path="test" handler={Test} />
  </Route>
);

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