title: Can't get React Router to work with this simple example
body: <p>I've tried as much as possible to do the same as in these <a href="https://github.com/rackt/react-router/tree/master/examples" rel="nofollow">react-router examples</a> but didn't get it working.</p>
  
  <p>I have this code:</p>
  
  <p>In <code>server.js</code>:</p>
  
  <pre><code>var express = require('express');
  
  var app = express();
  
  app.use(express.static(__dirname));
  
  app.listen(5000, function () {
      console.log('Server listening on http://localhost:5000, Ctrl+C to stop')
  });
  </code></pre>
  
  <p>In <code>index.html</code>:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="pt-BR"&gt;
      &lt;head&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;title&gt;Routing&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
  
          &lt;script src="dist/js/main.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And in <code>main.js</code> ("browserified" and transformed with "babelify"):</p>
  
  <pre><code>import React from 'react'
  import { createHistory, useBasename } from 'history'
  import { Router, Route, Link } from 'react-router'
  
  import Navbar from './components/Navbar'
  import Main from './components/Main'
  
  const history = useBasename(createHistory)({
      basename: '/'
  });
  
  const App = React.createClass({
      render ()
      {
          return (
              &lt;div&gt;
                  &lt;Navbar description="Testando..." /&gt;
                  &lt;Link to="/main"&gt;Go to main&lt;/Link&gt;
              &lt;/div&gt;
          )
      }
  });
  
  React.render((
      &lt;Router history={history}&gt;
          &lt;Route path='/' component={App}&gt;
              &lt;Route path='/main' component={Main} /&gt;
          &lt;/Route&gt;
      &lt;/Router&gt;
  ),
  document.body);
  </code></pre>
  
  <p>And when I click in link Go to Main, I get this error: <code>Uncaught SecurityError: Failed to execute 'pushState' on 'History': A history state object with URL 'http://main/' cannot be created in a document with origin 'http://localhost:5000'.</code></p>
  
  <p>What's wrong?</p>
  
  <p>P.S.: I'm using <strong>React version 0.13.3</strong> and <strong>react-router version 1.0.0-rc1</strong></p>
  
  <hr>
  
  <p><strong>EDIT</strong> - 10/09/2015 (after @knowbody 's answer)</p>
  
  <p>I've changed my <code>server.js</code> to:</p>
  
  <pre><code>const express = require('express')
  const path = require('path')
  const port = process.env.PORT || 5000
  const app = express()
  
  // serve static assets normally
  app.use(express.static(__dirname))
  
  // handle every other route with index.html, which will contain
  // a script tag to your application's JavaScript file(s).
  app.get('*', function (request, response){
      response.sendFile(path.resolve(__dirname, 'index.html'))
  })
  
  app.listen(port)
  console.log("server started on port " + port)
  </code></pre>
  
  <hr>
  
  <p><strong>EDIT</strong> - 10/10/2015</p>
  
  <p>Updated <code>index.html</code> from</p>
  
  <pre><code>&lt;script src="dist/js/main.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>to</p>
  
  <pre><code>&lt;script src="/dist/js/main.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>because I was having problem with URLs with two segments.</p>