title: React Router Not Working Like I Need It Too
body: <p>Im trying to figure out how to get my navigation bar setup as most of the UI is coming together. I have setup my index.js and also a Route.js and then linked them with my different components like so:</p>
  <p>Index.js</p>
  <pre><code>import React from &quot;react&quot;;
  import ReactDOM from &quot;react-dom&quot;;
  import { Auth0Provider } from &quot;./react-auth0-spa.js&quot;;
  import { useAuth0 } from &quot;./react-auth0-spa&quot;;
  import Routes from &quot;./Routes&quot;
  import config from &quot;./utils/auth_config.json&quot;;
  import { BrowserRouter } from &quot;react-router-dom&quot;;
  
  
  // A function that routes the user to the right place
  // after login
  const onRedirectCallback = appState =&gt; {
    history.push(
      appState &amp;&amp; appState.targetUrl
        ? appState.targetUrl
        : window.location.pathname
    );
  };
  
  ReactDOM.render(
    &lt;Auth0Provider
      domain={config.domain}
      client_id={config.clientId}
      redirect_uri={window.location.origin}
      onRedirectCallback={onRedirectCallback}
    &gt;
    &lt;BrowserRouter&gt;
        &lt;Routes /&gt;
    &lt;/BrowserRouter&gt;
  
    &lt;/Auth0Provider&gt;,
    document.getElementById(&quot;root&quot;)
  );
  
  </code></pre>
  <p>Routes.js</p>
  <pre><code>import React, { Component } from &quot;react&quot;;
  import { Router, Route, Switch, BrowserRouter } from &quot;react-router-dom&quot;;
  import {Link } from &quot;react-router-dom&quot;;
  import Profile from &quot;./components/user/Profile&quot;;
  import PrivateRoute from &quot;./components/user/PrivateRoute&quot;;
  import history from &quot;./utils/history.js&quot;;
  import HomePage from &quot;./modules/HomePage.js&quot;;
  import ProductPage from &quot;./modules/ProductPage&quot;;
  
  class Routes extends Component {
      render() {
          return (
              &lt;Router history={history}&gt;
                  &lt;Switch&gt;
                      &lt;Route path=&quot;/&quot; component={HomePage} /&gt;
                      &lt;Route path=&quot;/ProductPage&quot; component={ProductPage} /&gt;
                      &lt;PrivateRoute path=&quot;/profile&quot; component={Profile} /&gt;
                  &lt;/Switch&gt;
              &lt;/Router&gt;    
          )
      }
  }
  
  export default Routes;
  </code></pre>
  <p>but when i reload my site it just continues to say localhost:8080/ProductPage like its suppose to be the default, then when i manually enter localhost:8080/ and click on a button after linking it with</p>
  <pre><code>&lt;Link to=&quot;ProductPage&quot;&gt;
  </code></pre>
  <p>it will show on the tab localhost:8080/ProductPage but wont actually redirect me to the other component, i am just wondering what i am doing wrong?</p>