title: react-router and express child routes not triggering
body: <p>I'm trying to create a simple project configuration similar to jsfiddle but in my local machine.</p>
  
  <p>I only want to have 3 files for each fiddle and a server to start the single page aplication. I mainly use the react ecosystem.</p>
  
  <p>The problem comes when I want to use react-router. With this setup only the root '/' route triggers and all the children routes redirect to the index.html.</p>
  
  <p>(I will omit the style file because I doubt its the source of the problem)</p>
  
  <p>Any suggestions?</p>
  
  <p><strong><em>server.js</em></strong></p>
  
  <pre><code>var express = require('express');
  var path = require('path');
  var morgan = require('morgan');
  //var history = require('connect-history-api-fallback');
  
  var PORT = 3007;
  var HOST = 'localhost'
  
  var app = express();
  
  /*
  app.use(history({
    disableDotRule: true,
    verbose: true
  }));
  */
  
  app.use(morgan('tiny'));
  
  // Serve static assets
  app.use(express.static(__dirname));
  
  // Always return the main index.html
  app.get('*', function(req, res) {
    res.sendFile(path.join(__dirname, 'index.html'));
  });
  
  app.listen(PORT, HOST, function () {
    console.log('Example app listening on port ' + HOST + ':' + PORT + '...');
  });
  </code></pre>
  
  <p><strong><em>index.html</em></strong></p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;multi-page-form-with-router&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="styles.css" media="screen" /&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="root"&gt;&lt;/div&gt;
  
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/redux-thunk/2.2.0/redux-thunk.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.6.0/redux.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://unpkg.com/react@15.5.4/dist/react.js"&gt;&lt;/script&gt;
      &lt;script src="https://unpkg.com/react-dom@15.5.4/dist/react-dom.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/5.0.3/react-redux.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/3.0.4/ReactRouter.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/redux-form/6.6.3/redux-form.min.js"&gt;&lt;/script&gt;
  
      &lt;script type="text/babel" src="main.js"&gt;&lt;/script&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong><em>main.js</em></strong></p>
  
  <pre><code>const { Component } = React
  const { Router, Route, browserHistory, IndexRoute, Link } = ReactRouter
  
  const App = () =&gt; (
    &lt;Router history={browserHistory}&gt;
      &lt;Route path='/' component={Header}&gt;
        &lt;IndexRoute component={Menu} /&gt;
        &lt;Route path='first' component={FirstPage} /&gt;
        &lt;Route path='second' component={SecondPage} /&gt;
      &lt;/Route&gt;
    &lt;/Router&gt;
  );
  
  const Header = () =&gt; (
    &lt;h1&gt;Multi-page form&lt;/h1&gt;
  )
  
  const Menu = () =&gt; (
    &lt;ul&gt;
      &lt;li&gt;&lt;Link to='first'&gt;Start form&lt;/Link&gt;&lt;/li&gt;
    &lt;/ul&gt;
  )
  
  const FirstPage = () =&gt; {
    return (
      &lt;div&gt;
        &lt;p&gt;First Page&lt;/p&gt;
        &lt;Link to='second'&gt;Next&lt;/Link&gt;
      &lt;/div&gt;
    )
  }
  
  const SecondPage = () =&gt; {
    return (
      &lt;div&gt;
        &lt;p&gt;Second Page&lt;/p&gt;
        &lt;Link to='overview'&gt;Next&lt;/Link&gt;
      &lt;/div&gt;
    )
  }
  
  const Overview = () =&gt; {
    return (&lt;p&gt;Overview&lt;/p&gt;)
  }
  
  ReactDOM.render(
    &lt;App /&gt;,
    document.getElementById('root')
  )
  </code></pre>