Как на React при изменении Route менять содержимое тега?

Question

[Артём Митрофанов]

Как на React при переключении контента с помощью Switch/Route динамически менять содержимое html тега title?

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

[hzzzzl]

в компоненты положить это
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>

Answer 2

[Javid Asgarov]

Самый простой способ с componentDidMount менять document.title, так мы делали в одном из проектов.
А так, например, в Gatsby, я видел пользуются плагином react-helmet, он позволяет менять содержимое заголовка head. Посмотрите на него.