title: Reload the page gets 404 error using React Router
body: <p>I have...</p>
  
  <h3>Back-End</h3>
  
  <p>Node.js/express server which serves files when requests are made to certain routes. </p>
  
  <h3>Front-End</h3>
  
  <p>React pages that makes calls to the back-end requesting data to populate the pages.</p>
  
  <p>I'm using react-router v4 on the front end. Whenever I navigate to a route that is NOT at the exact path AND reload the page, I get a 404 error. I understand why this isn't working; the browser makes a request to a path handled by react-router, and since it doesn't find that route on the server, I get 404.</p>
  
  <p>I'm seeking for a solution to this problem.</p>
  
  <pre><code>// BrowserRouter imported as Router
  &lt;Router&gt;
     &lt;Route exact path='/main' component={Main} /&gt;
     &lt;Route path='/sub1' component={SubOne} /&gt;
     &lt;Route path='/sub2' component={SubTwo} /&gt;
  &lt;/Router&gt;
  </code></pre>
  
  <p>When I go to <code>/main</code> in the browser, <code>&lt;Main /&gt;</code> is rendered. Say that inside <code>&lt;Main /&gt;</code>, there are links to <code>/sub1</code> and <code>/sub2</code> respectively. I click on <code>/sub2</code>. Component and page content renders without fail. Then I refresh page, either by accident or intentionally (say component Sub2 lifts state up to Main).</p>
  
  <p>How do I avoid getting 404 after this refresh? How do I get the page/component where "I was" rendered after a refresh if I'm using React-Router?</p>