title: React-router not displaying component
body: <p>I'm currently learning react-router, and then trying to implement it in a sample app.</p>
  
  <p>Here is my code:</p>
  
  <p><em>index.html</em></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Sample APP&lt;/title&gt;
          &lt;link rel="stylesheet" href="dist/css/style.css"&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;div id="main"&gt;&lt;/div&gt;
      &lt;/body&gt;
  
      &lt;script src="dist/js/main.js"&gt;&lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><em>/src/app.jsx</em></p>
  
  <pre><code>var React = require('react');
  var ReactDOM = require('react-dom');
  
  var Routes = require('./routes');
  
  ReactDOM.render(Routes, document.getElementById('main'));
  </code></pre>
  
  <p><em>/src/routes.jsx</em></p>
  
  <pre><code>var React = require('react');
  var Router = require('react-router').Router;
  var Route = require('react-router').Route;
  var Link = require('react-router').Link;
  
  var HelloWorld = require('./components/hello-world');
  var NotFound = require('./components/not-found');
  var About = require('./components/about');
  
  module.exports = (
      &lt;Router&gt;
          &lt;Route path="/" component={HelloWorld}&gt;
              &lt;Route path="about" component={About}/&gt;
          &lt;/Route&gt;
      &lt;/Router&gt;
  );
  </code></pre>
  
  <p><em>/src/components/hello-world.jsx</em></p>
  
  <pre><code>var React = require('react');
  var Link = require('react-router').Link;
  
  module.exports = React.createClass({
      render: function() {
          return &lt;div&gt;
              &lt;h1&gt;
                  Hello World !
              &lt;/h1&gt;
              &lt;Link to="/about"&gt;About&lt;/Link&gt;
          &lt;/div&gt;
      }
  });
  </code></pre>
  
  <p><em>/src/components/about.jsx</em></p>
  
  <pre><code>var React = require('react');
  
  module.exports = React.createClass({
      render: function() {
          return &lt;h1&gt;
              About
          &lt;/h1&gt;
      }
  });
  </code></pre>
  
  <p><em>package.json</em></p>
  
  <pre><code>{...}
  "dependencies": {
      "browserify": "^9.0.3",
      "gulp": "^3.8.11",
      "gulp-concat": "^2.5.2",
      "gulp-react": "^3.0.1",
      "gulp-sass": "^2.0.1",
      "gulp-server-livereload": "^1.3.0",
      "gulp-util": "^3.0.4",
      "gulp-watch": "^4.2.4",
      "history": "^1.13.1",
      "node-notifier": "^4.2.1",
      "react": "^0.14.3",
      "react-dom": "^0.14.3",
      "react-router": "^1.0.0",
      "reactify": "^1.1.0",
      "vinyl-source-stream": "^1.1.0",
      "watchify": "^2.4.0"
  }
  </code></pre>
  
  <p><em>I use <code>gulp</code> to <code>browserify</code> and <code>reactify</code> my sources into <code>/dist/js/main.js</code></em></p>
  
  <p>When I click on my <code>about</code> link, url changes from <code>http://localhost:8000/#/?_k=zkmiyh</code> to <code>http://localhost:8000/#/about?_k=6nhkao</code> yet the displayed component is still <code>hello-world</code>.</p>
  
  <p>There is no error displayed on my console.</p>
  
  <p>Is there something missing out?</p>