Reactjs

Question

所以，我想为我的 React 应用程序中的每个视图或每个路由创建一个标题，而不仅仅是 index.html 文件（React 应用程序）中的那个。

Answer 1

你可以看看react-helmet。它允许您从组件中定义自定义 head 标签。

例如，如果你想让一个组件覆盖页面的标题，你可以这样做：

import { Helmet } from "react-helmet";

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

Answer 2

您可以使用 react-helmet 设置 React 应用程序的当前 document.title。只需在渲染方法中放置一个 <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>
    );
  }
}

然后您可以使用额外的 <Helmet /> 实例覆盖您最初设置的 <title>。只需将它包含在作为道具传递给 <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>
  );
);

Reactjs - 单个 React 应用程序中的多个标题

Reactjs - multiple titles in a single React app

react-router-v4

react-router-dom