title: React-Router 4 not handling direct links or refreshed pages
body: <p>This issue has come up before, but the existing answers still aren't working for me. My app uses React-Router 4, with Node/Express on the back end.</p>
  
  <p>I have read <a href="https://tylermcginnis.com/react-router-cannot-get-url-refresh/" rel="nofollow noreferrer">Tyler McGinnis's explanation</a>. I am using Browser Router and what McGinnis calls the "Catch-all" solution. My routes look like this:</p>
  
  <pre><code>app.use(express.static(path.join(__dirname, '../client/public')));
  
  app.post('/auth/signin', signin);
  
  // more Auth and CRUD routes
  
  app.get('/*', function(req, res) {
    res.sendFile(path.join(__dirname, '../client/public/index.html'), function(err) {
      if (err) {
        res.status(500).send(err)
      }
    })
  });
  </code></pre>
  
  <p>When I manually enter or refresh routes like <code>http://localhost:8357/admin</code>, this solution works fine. However, when I try that with longer routes like <code>http://localhost:8357/admin/create</code>, the app crashes. As far as I can tell, the browser loads <code>index.html</code> but then looks for bundle in <code>http://localhost:8357/admin/bundle</code>.</p>
  
  <p><strong>Edit:</strong> I sorta fixed this problem by hardcoding the css and bundle links in index.html, ie replacing <code>&lt;script type="text/javascript" src='bundle/bundle.js'&gt;&lt;/script&gt;</code> with <code>&lt;script type="text/javascript" src='http://localhost:8357/bundle/bundle.js'&gt;&lt;/script&gt;</code>. When I deploy I'll have to change those links. Not an elegant solution, but it works. Is  there a better way?</p>