How to change the contents of the tag in React when the Route changes?

Question

JavaScript

How to dynamically change the content of the html title tag in React when switching content using Switch/Route?
app.js:

import React, { Component } from 'react';
import { BrowserRouter } from 'react-router-dom';

import Header from './Header';
import Delimiter from './Delimiter';
import Contacts from './Contacts';
import Router from './system/Router';

export default class App extends Component {

    constructor() {
        super();

        this.state = {
            title: 'Header title'
        };
    }

    render() {
        return (
            <BrowserRouter>
                <div>
                    <Header title={this.state.title} />
                    <Delimiter />
                    <Router />
                    <Contacts />
                </div>
            </BrowserRouter>
        );
    }
}

route.js:

import React from 'react';
import { Switch, Route } from 'react-router-dom';

import ProjectList from './../Projects/Project';
import Contacts from './../Contacts';

const Content = () => {
    return (
        <Switch>
            <Route exact path='/' title="Dashboard" component={ProjectList} />
            <Route path='/portfolio' title="Dashboard2" component={ProjectList} />
            <Route path='/about' title="Dashboard3" component={Contacts} />
            <Route path='/contacts' title="Dashboard4" component={ProjectList} />
        </Switch>
    );
};

export default Content;

Answer 1

in components put this
https://github.com/nfl/react-helmet

<Parent>
    <Helmet>
        <title>My Title</title>
        <meta name="description" content="Helmet application" />
    </Helmet>

    <Child>
        <Helmet>
            <title>Nested Title</title>   // положить это
            <meta name="description" content="Nested component" /> 
        </Helmet>
    </Child>
</Parent>