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

Как на 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;
  • Вопрос задан
  • 444 просмотра
Решения вопроса 2
hzzzzl
@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>
Ответ написан
HalfBloodPrince
@HalfBloodPrince
Front-End Developer
Самый простой способ с componentDidMount менять document.title, так мы делали в одном из проектов.
А так, например, в Gatsby, я видел пользуются плагином react-helmet, он позволяет менять содержимое заголовка head. Посмотрите на него.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы