title: react-router v4 routes with express server (static)
body: <p>I created a React app with create-react-app and added react-router v4 to it.</p>
  
  <p>If I run the application with <code>yarn start</code> everything is fine.</p>
  
  <p>If I serve the app through an express server (static, no SSR), I cannot navigate to 'complex' route such as <a href="http://localhost:3000/xxxxxx/12345" rel="nofollow noreferrer">http://localhost:3000/xxxxxx/12345</a>.</p>
  
  <p>Here is the route as it it configured with react-router:</p>
  
  <pre><code> &lt;ApolloProvider client={apolloClient}&gt;
          &lt;Provider store={store}&gt;
            &lt;ConnectedRouter history={history}&gt;
              &lt;LocaleProvider locale={enUS}&gt;
                &lt;Switch&gt;
  
  
                  &lt;Route path="/xxxxxx/:id" component={MyCOmponent} /&gt;
                  &lt;Route component={NotFound} /&gt;
  
  
                &lt;/Switch&gt;
              &lt;/LocaleProvider&gt;
            &lt;/ConnectedRouter&gt;
          &lt;/Provider&gt;
        &lt;/ApolloProvider&gt;
  </code></pre>
  
  <p>Here is the express server code:</p>
  
  <pre><code>// tslint:disable:no-console
  // tslint:disable:no-any
  
  import * as express from 'express';
  import * as path from 'path';
  
  const port = process.env.PORT || 3000;
  
  var app: express.Application = express();
  
  app.use(express.static(path.join(__dirname, 'build')));
  
  app.get('/*', function (req: any, res: any) {
    console.log(req.originalUrl);
  
    res.sendFile(path.join(__dirname, 'build', 'index.html'));
  });
  
  const server = app.listen(port, () =&gt; {
    console.log(`  App is running at http://localhost:${port} in ${app.get('env')} mode`);
    console.log('  Press CTRL-C to stop\n');
  });
  
  export default server;
  </code></pre>
  
  <p>I noticed that the javascript bundle requested in the network logs (in chrome) have the wrong url: <code>xxxxx/static/js/bundle-hash.js</code> as well as the <code>req.originalUrl</code> in the console log.</p>
  
  <pre><code>/xxxxx/static/css/main.144af4c5.css
  /xxxxx/static/js/main.65b09e30.js
  /xxxxx/favicon.ico
  </code></pre>
  
  <p>Why javascript/css files are prefixed by xxxxxx (it should be 
  <code>static/js/bundle-hash.js</code> not <code>xxxxx/static/js/bundle-hash.js</code>)?</p>