title: React Router not working after the page refresh
body: <p>fellow coders!</p>
  
  <p>I have a react web app with BrowserRouter but when I do a page refresh, it suddenly stops routing anywhere regarding redirects from code.</p>
  
  <p>The main <strong>index.js</strong> code looks like this:</p>
  
  <pre><code>ReactDOM.render(
    &lt;Provider store={store}&gt;
      &lt;BrowserRouter&gt;
        &lt;App /&gt;
      &lt;/BrowserRouter&gt;
    &lt;/Provider&gt;,
    document.getElementById('root')
  );
  </code></pre>
  
  <p>The <strong>App.js</strong> routing is made from free and protected routes - just my way of implementing user authentication:</p>
  
  <pre><code>const freeRoutes = () =&gt; (
    &lt;Switch&gt; //My login component
      &lt;Route path='/' component={Signin} /&gt; 
      &lt;Redirect to='/' /&gt;
    &lt;/Switch&gt;
  )
  
  const protectedRoutes = () =&gt; (
    &lt;Switch&gt; //The other component from which I use the log out function
      &lt;Route path='/home' component={Home} /&gt; 
      &lt;Redirect to='/home' /&gt;
    &lt;/Switch&gt;
  )
  
  const App = (props) =&gt; (
      &lt;div&gt;
        { sessionStorage.getItem("token") ? protectedRoutes() : freeRoutes() }
      &lt;/div&gt;
  )
  </code></pre>
  
  <p>May app's Logout function is based on action, which simply removes sessionStorage item. </p>
  
  <p>How do I reproduce the problem and how do I know that my code should be working?</p>
  
  <p>When I log in and get redirected to Home component and then click logout - everything works fine, I get redirected back to the Login component and I can keep doing this multiple times.</p>
  
  <p>However, when I log into my app and while being in Home component refresh the page - the redirections does no longer work. I've checked if the logout function works, and it really does work - it removes the sessionStorage item, but the redirection does not work and the path stays stuck on <strong>localhost:3000/home</strong> until I refresh the page again, what then transfers me back to the Login component.</p>
  
  <p>I use:</p>
  
  <blockquote>
  <pre><code>"react": "^16.4.0",
  "react-redux": "^5.0.7",
  "react-router-dom": "^4.3.1"
  </code></pre>
  </blockquote>
  
  <p>I've also tried adding <em>&lt; base href="/"></em> into my <em>index.html</em> as well as historyApiFallback setting into my webpack.config.dev.js.</p>
  
  <blockquote>
  <pre><code> devServer: {
      historyApiFallback: true
   }
  </code></pre>
  </blockquote>
  
  <p>Any suggestions, corrections and ideas would be very appreciated!</p>
  
  <p>P.S. This project was made using create-react-app</p>