title: React Router & Express Conflicts
body: <p>I have paths that I want React Router to handle, and I also have an express API backend that I call from the React app to do some secure API calls.</p>
  
  <p><code>/#/</code> - want app served here<br>
  <code>/#/:id</code> - unique URLs for the app, i use the ID to call certain express endpoints from React.<br>
  <code>*</code> - all express REST endpoints  </p>
  
  <p>Express app.js:</p>
  
  <pre><code>app.use(middleware);
  app.use(require('webpack-hot-middleware')(compiler, {
    log: console.log
  }));
  app.use('/api', [router_invokeBhApi]);
  app.get('/#/*', function response(req, res) {
    res.write(middleware.fileSystem.readFileSync(path.join(__dirname, 'dist/index.html')));
    res.end();
  });
  app.use(express.static(path.join(__dirname, '/dist')))
  </code></pre>
  
  <p>My React router component:</p>
  
  <pre><code>export default (
    &lt;Route path="/" component={App}&gt;
      &lt;IndexRoute component={HomePage} /&gt;
      &lt;Route path="/:id" component={ConsentForm} something="dope"/&gt;
    &lt;/Route&gt;
  );
  </code></pre>
  
  <p>So here's what's happening:<br>
  - going to <code>localhost:8000</code> serves the app with the <code>HomePage</code> component<br>
  - going to <code>localhost:8000/#/</code> also serves the app with the <code>HomePage</code> component<br>
  - going to <code>localhost:8000/example</code> gives me <code>Cannot GET /example</code> which means express is working<br>
  - going to <code>localhost:8000/api</code> gives me a test JSON object which i send from express, which is correct.<br>
  - going to <code>localhost:8000/#/somehashcode</code> STILL gives me the <code>HomePage</code> component, when it SHOULD be giving me the <code>ConsentForm</code> component.</p>
  
  <p>I inspected the Router component using React Dev tools:<br>
  - the RouterContext component has an object called <code>routes</code> with a <code>childRoutes</code> inside the <code>routes[0]</code>, and it has the path <code>/:id</code>. <code>routes[0]</code> also has a path <code>/</code> which tells me React Router loaded all the routes correctly??</p>
  
  <p>So confused...</p>
  
  <p>React file where I render the whole app:</p>
  
  <pre><code>import 'babel-polyfill';
  
  import React from 'react';
  import ReactDOM from 'react-dom';
  import { Router, browserHistory } from 'react-router';
  
  import Routes from './shared/components/Routes';
  
  import './shared/base.css';
  import './shared/customInput.css';
  
  
  const ROOT_ELEMENT = 'app';
  
  ReactDOM.render((
    &lt;Router history={browserHistory}&gt;
      {Routes}
    &lt;/Router&gt;
  ), document.getElementById(ROOT_ELEMENT));
  </code></pre>