title: React Router - Go back to the last page visited, and not the default component
body: <p>I am having a bit of an issue with React Router that I can not seem to figure out. It does not go back to the very last page visited, rather the first page it loaded. Here is an example.</p>
  
  <p>index.js:</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import { BrowserRouter as Router } from 'react-router-dom';
  import PrivateRoute from './utils/auth/PrivateRoute';
      &lt;Router&gt;
        &lt;PrivateRoute exact path="/dashboard" component={DashboardView} /&gt;
        &lt;PrivateRoute exact path="/games" component={Games} /&gt;
        &lt;PrivateRoute
          exact
          path="/viewgame/:id*/"
          component={SingleGameView}
        /&gt;
      &lt;/Router&gt;
  </code></pre>
  
  <p>When you go to <code>/dashboard</code>, you can click to view a games list that takes you to <code>/games</code>. You can then click on a game to see a single view of it, which takes you to <code>/viewgame/:id*</code></p>
  
  <p>Like so: /dashboard -> /games -> /viewgame/:id*</p>
  
  <p>When you click on a game and are taken to <code>/viewgame/</code>, and then decide to click back in the browser, it takes me back to <code>/dashboard</code> instead of taking me back to /games. It is skipping over the last visited page, and taking me back to the first loaded page. I can send someone back to a route by setting up my own 'click to go back' button, but I need the browsers actual back and forward button to do this. </p>
  
  <p><code>PrivateRoute</code> is a HOC I setup to check to make sure the user accessing the route is authenticated or not. Otherwise they are booted. In case that could be the issue here is that component:</p>
  
  <pre><code>import React from 'react';
  import { Route, Redirect } from 'react-router-dom';
  
  //Utils - Auth
  import { userAuth } from '../../../authentication/authentication';
  const { isAuthenticated } = userAuth;
  
  //Checks if a user isAuthenticated. If so, it renders the passed in secure component. If not, it renders a redirect to /signin
  const PrivateRoute = ({ component: Component, ...rest }) =&gt; (
    &lt;Route
      {...rest}
      render={props =&gt;
        isAuthenticated() ? (
          &lt;Component {...props} /&gt;
        ) : (
          &lt;Redirect
            to={{
              pathname: '/signin',
              state: { from: props.location }
            }}
          /&gt;
        )
      }
    /&gt;
  );
  
  export default PrivateRoute;
  </code></pre>
  
  <p>Here’s a snapshot of the PrivateRoute props when it’s rendered a component: <a href="https://i.stack.imgur.com/pV1Vx.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/pV1Vx.jpg" alt="enter image description here"></a></p>