title: react router: pressing back button does not bring user back to previous page
body: <p>I'm working on an app with web socket io and have run into a strange issue. I have a simple app:</p>
  <pre><code>import { SocketIOClient } from './containers/SocketIOClient.js';
  import { Home } from './screens/Home.js';
  import { Game } from './screens/Game.js';
  import { BrowserRouter, Routes, Route } from 'react-router-dom';
  
  const App = () =&gt; (
    &lt;SocketIOClient
      router={ (props) =&gt; (
        &lt;BrowserRouter&gt;
          &lt;Routes&gt;
            &lt;Route exact path=&quot;/&quot; element={&lt;Home {...props} /&gt;}&gt;&lt;/Route&gt;
            &lt;Route path=&quot;/:lobbyId&quot; element={&lt;Game {...props} /&gt;}&gt;&lt;/Route&gt;
          &lt;/Routes&gt;
        &lt;/BrowserRouter&gt;
      )}
    /&gt;
  );
  </code></pre>
  <p>where SocketIOClient just contains the socket client object used to connect to my server.
  I also have a simple Home page:</p>
  <pre><code>import { useState, useEffect } from 'react';
  import Container from 'react-bootstrap/Container';
  import Button from 'react-bootstrap/Button';
  import { useNavigate, useLocation } from 'react-router-dom';
  
  import './Home.css'
  
  export const Home = ({ socket }) =&gt; {
      const navigate = useNavigate();
      const location = useLocation();
      const [failedToJoin, setFailedToJoin] = useState(location.state ? location.state.failedToJoin : false);
  
      const createGame = () =&gt; {
          socket.emit('create_game');
      }
  
      useEffect(() =&gt; {
          socket.on('failed_to_join', () =&gt; {
              setFailedToJoin(true);
          });
  
          socket.on('space_available', ({ lobby_id }) =&gt; {
              navigate(`/${lobby_id}`);
          });
      // eslint-disable-next-line
      }, [socket])
  
      useEffect(() =&gt; {
          console.log(navigate)
      })
  
      return ( 
          &lt;Container id=&quot;home-page&quot;&gt;
                  &lt;Button
                      variant=&quot;info&quot;
                      onClick={createGame}
                  &gt;
                      Create New Game
                  &lt;/Button&gt;
          &lt;/Container&gt;
      );
  };
  </code></pre>
  <p>When the user clicks the button, they create a Game and (assuming the <code>space_available</code> message is received) are navigated to:</p>
  <pre><code>import { useEffect, useState } from 'react';
  import { useParams, useNavigate } from &quot;react-router-dom&quot;;
  
  export const Game = ({ socket }) =&gt; {
      const [joined, setJoined] = useState(false);
      const navigate = useNavigate();
      const params = useParams();
      const lobbyId = params.lobbyId
  
      useEffect(() =&gt; {
          socket.emit('join_game', { lobby_id: lobbyId, player_id: socket.id })
  
          socket.on('game_joined', _ =&gt; {
              setJoined(true)
          });
  
          socket.on('failed_to_join', () =&gt; {
              navigate('/', {state: {failedToJoin: true, lobbyId}});
          });
  
          return () =&gt; {
            socket.emit('back_button_pressed', {player_id: socket.id})
          }
  
      // eslint-disable-next-line
      }, [socket]);
  
      return joined ? (
          &lt;div&gt;
            &lt;h1&gt;lobby id: {lobbyId}&lt;/h1&gt;
          &lt;/div&gt;
      ) : null
  }
  </code></pre>
  <p>The issue is, if I'm on the Home page and click the Create Game button, I'm brought to the Game page. If I press the browser back button, I go back to the Home page. If I press Create Game again, I'm brought the Game page, but strangely I now have to press the back button 2 times to return to Home.</p>
  <p>If I instead press the browser forward button on Home after viewing Game page, I'm given a <code>Warning: Can't perform a React state update on an unmounted component.</code> Does anyone know what's causing me these issues? I have a feeling it's due to the useEffect with the socket working in some way I'm not understanding right.</p>