Reactjs - несколько названий в одном приложении React

Question

Итак, я хочу создать заголовок для каждого представления или для каждого маршрута в моем приложении React, а не только в файле index.html (приложение React).

Answer 1

Вы можете установить текущий document.title вашего приложения React, используя реагирующий шлем . Просто поместите компонент <Helmet /> в метод визуализации и установите его теги <meta> и <title> в соответствии с документацией:

import React, { Component } from 'react';
import { Helmet } from 'react-helmet';

class App extends Component {
  render () {
    return (
      <div>
        <Helmet>
          <title>My App's First Title</title>
        </Helmet>
      </div>
    );
  }
}

Затем вы можете переопределить <title>, который вы изначально установили, с помощью дополнительных <Helmet /> экземпляров. Просто включите его в компонент, переданный в качестве опоры <Route />:

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

const MyPageComponent = (
  <div>
    <Helmet>
      <title>My App's Second Title</title>
    </Helmet>
    <p>Welcome to my page.</p>
  </div>
);

const MyRoute = () => (
  return (
    <Switch>
      <Route path="/myPage" component={MyPageComponent} />
    </Switch>
  );
);

Answer 2

Вы можете взглянуть на реагирующий шлем . Это позволяет вам определять собственные теги заголовков из ваших компонентов.

Например, если вы хотите, чтобы компонент переопределил заголовок страницы, вы можете сделать это так:

import { Helmet } from "react-helmet";

// Inside your render:
<Helmet>
    <title>This is a new title!</title>
</Helmet>