title: React - Browser's Back button doesn't work
body: <p>In the following component, if I click on any of the two buttons, the URL in the address-bar gets changed.</p>
  
  <p>In the list view if you click on the button <strong>Details</strong> the page get rendered and shows that particular item and the URL in the address bar get changed too.
  And in the user view if you click on the "Back to overview" button, the page renders back to the list view and the URL gets changed again.</p>
  
  <pre><code>import React, { useState, useEffect, Fragment } from 'react'
  import axios from 'axios'
  
  const UserList = ({ id, setID }) =&gt; {
    const [resources, setResources] = useState([])
  
    const fetchResource = async () =&gt; {
      const response = await axios.get(
        'https://api.randomuser.me'
      )
      setResources(response.data.results)
    }
  
    useEffect(() =&gt; {
      fetchResource()
    }, [])
  
    const renderItem = (item, userId) =&gt; {
      const setURL = (e) =&gt; {
        window.history.pushState(null, null, '/' + e)
        setID(item.login.uuid)
      }
  
      const clearURL = (e) =&gt; {
        window.history.back()
        setID(null)
      }
  
      return (
        &lt;Fragment key={item.login.uuid}&gt;
          {userId ? (
            // User view
              &lt;div&gt;
                &lt;img src={item.picture.large} /&gt;
                &lt;h2&gt;
                  {item.name.first}
                &lt;/h2&gt;
                &lt;p&gt;
                  {item.phone}
                  &lt;br /&gt;
                  {item.email}
                &lt;/p&gt;
                &lt;button onClick={() =&gt; clearURL('/')}&gt;
                  Back to overview
                &lt;/button&gt;
              &lt;/div&gt;
          ) : (
            // List view
            &lt;li&gt;
                &lt;img src={item.picture.large} /&gt;
                &lt;h2&gt;
                  {item.name.first}                 
                &lt;/h2&gt;
                &lt;button onClick={() =&gt; setURL(item.login.uuid)}&gt;
                  Details
                &lt;/button&gt;
            &lt;/li&gt;
          )}
        &lt;/Fragment&gt;
      )
    }
  
    const user = resources.find(user =&gt; user.login.uuid === id)
  
    if (user) {
      // User view
      return &lt;div&gt;{renderItem(user, true)}&lt;/div&gt;
    } else {
      // List view
      return (
        &lt;&gt;
          &lt;ul&gt;
            {resources.map(user =&gt; renderItem(user, false))}
          &lt;/ul&gt;
        &lt;/&gt;
      )
    }
  }
  
  export default UserList
  </code></pre>
  
  <p>Everything is working fine.</p>
  
  <p>However, the problem with this solution is that on user view, I cannot use the browsers back button to go back to the list view page. 
  Is there any way I can change this without using React Route?</p>