title: How to change page title on separate header component depending on route with React?
body: <p>I am using React and have my project structured in a way that I have layout components and then the main page components. I want to change the title of the page in the header component depending on which route the user came to.</p>
  
  <p>Here is my App.jsx:</p>
  
  <pre><code>import React, { Suspense, lazy, Component } from 'react';
  import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
  
  import Header from './layout/Header.jsx';
  import Footer from './layout/Footer.jsx';
  
  const  Home = lazy(() =&gt; import('./pages/Home.jsx'));
  const  Weather = lazy(() =&gt; import('.pages/Weather.jsx'));
  const  Encryption = lazy(() =&gt; import('./pages/Encryption.jsx'));
  const  Video = lazy(() =&gt; import('./pages/Video.jsx'));
  
  class App extends Component {
  render() {
      return (
          &lt;Router&gt;
              &lt;&gt;
                  &lt;Header/&gt;
                  &lt;Suspense fallback={&lt;div&gt;Loading...&lt;/div&gt;}&gt;
                  &lt;Switch&gt;
                      &lt;Route exact path="/" component={Home}/&gt;
                      &lt;Route path="/weather" component={Weather}/&gt;
                      &lt;Route path="/encryption" component={Encryption}/&gt;
                      &lt;Route path="/video" component={Video}/&gt;
                  &lt;/Switch&gt;
                  &lt;/Suspense&gt;
                  &lt;Footer/&gt;
  
              &lt;/&gt;
          &lt;/Router&gt;
      );
  }
  }
  
  export default App;
  </code></pre>
  
  <p>My Header.jsx component is like so:</p>
  
  <pre><code>import React, { Component } from 'react';
  
  class Header extends Component {
    constructor(props) {
      super(props);
    }
    render() {
      return (
          &lt;h1&gt;Page Title&lt;/h1&gt;
      );
    }
  }
  
  export default Header;
  </code></pre>