title: How to use browser back/forward buttons to navigate React state change history
body: <p>I have a Dashboard.js page component at a path like "/dashboard" that lets users navigate between 3 tables all by altering its state while the URL stays the same (the route is not changing). I'm trying to add browser back/forward button support for these state changes, but I'm stuck trying to figure out how to push the state changes to history and restore them in the component when the user clicks the back/forward buttons.</p>
  
  <p>Within my component I tried adding <code>this.props.history.push(this.props.location.path, this.state)</code> to one of my main functions that does <code>setState()</code> to see if that would allow back button navigation. It definitely adds to the history, because now I can press the back button a few times before it leaves the page, but the page looks the same (the component doesn't get the old state back). How and where do I make the component "restore the old state" when the back button is pressed?</p>
  
  <p>Here's a basic example of my component structure:</p>
  
  <pre><code>class Dashboard extends Component {
    state = {
      // table data, current table, etc.
    }
  
    componentDidMount() {
      // get records from db, set state
    }
  
    navigateExample() {
      // various functions like this one set state,
      // basically navigating between tables
      this.props.history.push(this.props.location.path, this.state) // &lt;--here?
      this.setState({ table: newTable })
    }
  
    render() {
      // renders different table components depending on state
    }
  }
  
  </code></pre>
  
  <p>I apologize if the example code is too vague, my component file is large and I don't know what is relevant to include. Thanks in advance for the help.</p>