title: Change title in App Bar when user navigates to a different component in React
body: <p>I have a React app with a bunch of components and have it structured in the following way</p>
  
  <pre><code>class App extends Component {
    render() {
      return (
        &lt;Router&gt;
          &lt;ResponsiveDrawer&gt;
            &lt;div className="App"&gt;
                &lt;div&gt;
                  &lt;Route exact path="/" component={Administrator} /&gt;
                  &lt;Route path="/admin" component={Administrator} /&gt;
                  &lt;Route exact path="/jobs" component={Jobs} /&gt;
                  &lt;Route path="/jobs/:id" render={({match}) =&gt; &lt;ViewJob id={match.params.id} /&gt;} /&gt;
                  &lt;Route path="/entries/:jobId/:entryId" render={({match}) =&gt; &lt;Entry jobId={match.params.jobId} entryId={match.params.entryId} /&gt;} /&gt;
                  &lt;Route exact path="/reports" component={Reports} /&gt;
                  &lt;Route path="/reports/:jobId" render={({match}) =&gt; &lt;JobReport id={match.params.jobId} /&gt;} /&gt;
                  &lt;Route path="/reports/activity" component={ActivityReport} /&gt;
                &lt;/div&gt;
            &lt;/div&gt;
           &lt;/ResponsiveDrawer&gt;
       &lt;/Router&gt;
  
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>Part of the ResponsiveDrawer contains a title that I want to change based on which component the user is currently in. Is there any way that I can pass props up to a parent like that?</p>