title: How to change state based on Route change in React-Router?
body: <p>I'm trying to figure out how to change the state of my Dashboard when a new route is clicked. This new route change needs to update the TopMenu component. </p>
  
  <hr>
  
  <p>This is the code for the Dashboard</p>
  
  <pre><code>class Dashboard extends Component {
    constructor (props) {
      super(props)
      this.state = {
          selectedMenuItem: 'Now'
      }
    }
  
  render () {
  return (
    &lt;Router&gt;
      &lt;div id='dashboard-container'&gt;
        &lt;LeftMenu/&gt;
  
        &lt;div className='column'&gt;
          &lt;TopMenu selectedMenuItem={this.state.selectedMenuItem} /&gt;
  
          &lt;div id='content-container'&gt;
            &lt;div&gt;
              &lt;Switch&gt;
                &lt;Route exact path='/' component={Now} /&gt;
                &lt;Route exact path='/surveys' component={Surveys} /&gt;
                &lt;Route exact path='/my-questions' /&gt;
                &lt;Route exact path='/feedback' /&gt;
                &lt;Route exact path='/logout' /&gt;
                &lt;Route render={function () {
                              return &lt;p&gt;Not Found&lt;/p&gt;
                          }} /&gt;
              &lt;/Switch&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
          &lt;/div&gt;
  
    &lt;/Router&gt;
  
  )}}
  </code></pre>
  
  <hr>
  
  <p>This is the code for the TopMenu</p>
  
  <pre><code>class TopMenu extends Component {
    render () {
      return (
         &lt;h3&gt;{this.props.selectedMenuItem}&lt;/h3&gt;
      )
    }
  }
  </code></pre>
  
  <p>How do I listen to a change in React Router such that I can change the 'selectedMenuItem' state variable in the Dashboard and pass that to TopMenu. </p>
  
  <p>Thanks!</p>