title: React Link changes URL on the browser but doesn't render new content
body: <p>I am building a chat app and trying to match the id params to render each one on click.I have a RoomList component that maps over the rooms via an endpoint /rooms</p>
  <p>I then have them linked to their corresponding ID. THe main components are Chatroom.js and RoomList is just the nav</p>
  <pre><code>import moment from 'moment';
  import './App.scss';
  import UserInfo from './components/UserInfo';
  import RoomList from './components/RoomList';
  import Chatroom from './components/Chatroom';
  import SendMessage from './components/SendMessage';
  import { Column, Row } from &quot;simple-flexbox&quot;;
  import { Route, Link, Switch } from 'react-router-dom'
  
  function App() {
  
    const timestamp = Date.now();
    const timeFormatted = moment(timestamp).format('hh:mm');
  
    const [username, setUsername] = useState('');
    const [loggedin, setLoggedin] = useState(false);
  
    const [rooms, setRooms] = useState([]);
    const [roomId, setRoomId] = useState(0);
  
    const handleSubmit = async e =&gt; {
      e.preventDefault();
      setUsername(username)
      setLoggedin(true)
    };
  
    useEffect(() =&gt; {
      let apiUrl= `http://localhost:8080/api/rooms/`;
      const makeApiCall = async() =&gt; {
        const res = await fetch(apiUrl);
        const data = await res.json();
        setRooms(data);
      };
      makeApiCall();
    }, [])
  
    const handleSend = (message) =&gt; {
      const formattedMessage = { name: username, message, isMine: true};
    }
  
    return (
      &lt;div className=&quot;App&quot;&gt;
      
        &lt;Route 
          path=&quot;/&quot; 
          render={(routerProps) =&gt; (
            (loggedin !== false) ?
  
              &lt;Row&gt;
                &lt;Column&gt;
                  {/*&lt;Chatroom roomId={roomId} messages={messages} isMine={isMine}/&gt;*/}
                  
                &lt;/Column&gt;
              &lt;/Row&gt;
            :
            &lt;form onSubmit={handleSubmit}&gt;
              &lt;label htmlFor=&quot;username&quot;&gt;Username: &lt;/label&gt;
              &lt;input
                type=&quot;text&quot;
                value={username}
                placeholder=&quot;enter a username&quot;
                onChange={({ target }) =&gt; setUsername(target.value)}
              /&gt;
             &lt;button type=&quot;submit&quot;&gt;Login&lt;/button&gt;
            &lt;/form&gt;
          )} 
        /&gt;
        
      &lt;Switch&gt;
  
        &lt;Route 
          exact 
          path=&quot;/:id&quot; 
          render={(routerProps) =&gt; (
            &lt;Row&gt;
              &lt;Column&gt;
                &lt;UserInfo username={username} time={timeFormatted}/&gt;
                &lt;RoomList rooms={rooms}/&gt;
              &lt;/Column&gt;
              &lt;Column&gt;
                &lt;Chatroom {...routerProps} roomId={roomId}/&gt;
                &lt;SendMessage onSend={handleSend}/&gt;
              &lt;/Column&gt;
            &lt;/Row&gt;
          )}
        /&gt;
        &lt;/Switch&gt;
       
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p><strong>RoomList.js</strong></p>
  <pre><code>import { Row } from &quot;simple-flexbox&quot;;
  
  const RoomList = (props) =&gt; {
      return (
          &lt;div className=&quot;RoomList&quot;&gt;
              &lt;Row wrap=&quot;false&quot;&gt;
                  {
                      props.rooms.map((room, index) =&gt; {
                          return (
                              &lt;Link to={`/${room.id}`} key={index}&gt;{room.id} {room.name}&lt;/Link&gt;
                          )
                      })
                  }
              &lt;/Row&gt;
          &lt;/div&gt;
      )
  }
  
  export default RoomList;
  </code></pre>
  <p><strong>Chatroom.js</strong>
  this is the main component that should render based on the ID</p>
  <pre><code>import Message from './Message';
  import { Link } from 'react-router-dom'
  
  const Chatroom = (props) =&gt; {
      const [roomId, setRoomId] = useState(0);
      const [name, setName] = useState('Roomname')
      const [messages, setMessages] = useState([]);
  
      useEffect(() =&gt; {
      let apiUrl= `http://localhost:8080/api/rooms/`;
      const id = props.match.params.id;
      const url = `${apiUrl}${id}`;
      const makeApiCall = async () =&gt; {
        const res = await fetch(url);
        const data = await res.json();
        setRoomId(data.id);
        setUsers(data.users)
        setName(data.name)
      };
      makeApiCall();
    }, []);
  
    useEffect(() =&gt; {
      const id = props.match.params.id;
      const url = `http://localhost:8080/api/rooms/${id}/messages`;
      const makeApiCall = async() =&gt; {
        const res = await fetch(url);
        const data = await res.json();
        setMessages(data);
      };
      makeApiCall();
    }, [])
  
      return (
          &lt;div className=&quot;Chatroom&quot;&gt;
              {name}
          &lt;/div&gt;
      )
  }
  
  export default Chatroom;```
  
  when I click on the links I want the change to refresh the new content but it wont? any ideas why ? thank you in advance!
  </code></pre>