title: Remove # Hash from URL in React with React Router
body: <p>I want to remove the # Hash from the url using React Router dom.
  I came across the solution of putting the browserrouter around the switch with the routes, which seems to only work when you change between tabs, but when reloading or loading the site initially the # still appears</p>
  <p>My Router Code</p>
  <pre><code>return (
  &lt;BrowserRouter&gt;
  &lt;Switch&gt;
    {!authCtx.isLoggedIn &amp;&amp; (
      &lt;Route
        exact
        path=&quot;/&quot;
        component={() =&gt; (
              &lt;Home /&gt;
        )}
      /&gt;
    )}
    {!authCtx.isLoggedIn &amp;&amp; (
      &lt;Route path=&quot;/Login&quot; component={() =&gt; &lt;Login /&gt;} /&gt;
    )}
    {authCtx.isLoggedIn &amp;&amp; (
      &lt;Route
        path=&quot;/EmployeeHome&quot;
        component={() =&gt; (
            &lt;EmployeeHome /&gt;
        )}
      /&gt;
    )}
    {authCtx.isLoggedIn &amp;&amp; (
      &lt;Route path=&quot;/Appointment&quot;&gt;
        &lt;Redirect to=&quot;/EmployeeHome&quot; /&gt;
      &lt;/Route&gt;
    )}
    {authCtx.isLoggedIn &amp;&amp; (
      &lt;Route path=&quot;/Documentations&quot; component={() =&gt; &lt;Documentations /&gt;} /&gt;
    )}
    {authCtx.isLoggedIn &amp;&amp; (
      &lt;Route
        path=&quot;/Statistic&quot;
        component={() =&gt; (
            &lt;Statistics /&gt;
        )}
      /&gt;
    )}
  
    &lt;Route path=&quot;*&quot;&gt;
      {authCtx.isLoggedIn &amp;&amp; &lt;Redirect to=&quot;/Appointment&quot; /&gt;}
      {!authCtx.isLoggedIn &amp;&amp; &lt;Redirect to=&quot;/&quot; /&gt;}
    &lt;/Route&gt;
  &lt;/Switch&gt;
  &lt;/BrowserRouter&gt;);
  </code></pre>