【React】根据每个组件的需要，对头部标题进行更改

2 年 ago

宇, 华

3 minutes

首先

标签标题的名称和添加到收藏夹的标题是根据头部标签内的标题标签的值来反映的。 (Simplified Chinese)

选项：标签标题的名称和加入到收藏夹的标题都取决于头部标签内标题标签的值。

<head>
  <title>My test page</title>
</head>

我們將在這次分享中整理一下如何在 React 組件內更改標題。
最終結論是使用一個叫做 react-helmet-async 的庫來解決。

目标读者

react-helmet-async の使い方が知りたい人

另外，我们将最终的代码放在以下的代码库中。

建立环境

这次我想尝试使用 vite。

看着这个进行了环境搭建。
比起create-react-app快了很多，感觉非常不错呢。

请使用中文原生地进行改写，仅需提供一个选项：版本

$ node -v
v16.17.1
$ yarn -v
1.22.19

"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-helmet-async": "^1.3.0",
"react-router-dom": "^6.4.3",
"@types/react": "^18.0.17",
"@types/react-dom": "^18.0.6",
"@vitejs/plugin-react": "^2.1.0",
"typescript": "^4.6.4",
"vite": "^3.1.0"

开始设定

请安装所需的库。

$ yarn add react-helmet-async
$ yarn add react-router-dom

路由设定

在使用 `react-helmet-async` 之前，首先使用 React Router 来实现点击链接时可以跳转到另一个组件。

touch src/page1.tsx

export const Page1 = () => {
  return (
    <div>
      <h1>Page1</h1>
      <nav>
        <ul>
          <li>
            <a href={`/`}>home</a>
          </li>
          <li>
            <a href={`page1`}>page1</a>
          </li>
        </ul>
      </nav>
    </div>
  );
};

在src文件夹下创建page1.tsx文件，并将上述代码写入其中。

import './App.css'

function App() {
  return (
    <div>
      <h1>home</h1>
      <nav>
          <ul>
            <li>
              <a href={`/`}>home</a>
            </li>
            <li>
              <a href={`page1`}>page1</a>
            </li>
          </ul>
        </nav>
    </div>
  )
}

export default App

修改 app.tsx 文件使其更清晰，并放置链接。目前为止，即使进行导航，仍无法显示 page1。

使用React Router可以根据跳转的路径切换显示的组件。

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'
import { Page1 } from './page1';
import {  createBrowserRouter, RouterProvider } from "react-router-dom";

const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
  },
  {
    path: "/page1",
    element: <Page1 />,
  },
]);

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
)

通过在createBrowserRouter函数的参数中指定路径和对应的组件，然后将其指定到该组件的props中，可以实现页面之间的来回切换。

将每个组件的标题更改为head 的title。

接下来是正题。

<React.StrictMode>
  <HelmetProvider>
    <RouterProvider router={router} />
  </HelmetProvider>
</React.StrictMode>

使用HelmetProvider来包装主要组件。

添加头盔配件

const componentName = "Home";

我們可以將每個組件的顯示字串定義為變數。

<Helmet>
  <title>{componentName}</title>
</Helmet>

将此组件添加到每个页面上。

最终的代码 de daimǎ)

import './App.css'
import { Helmet } from 'react-helmet-async';


function App() {
  const componentName = "Home";
  return (
    <div>
      <Helmet>
        <title>{componentName}</title>
      </Helmet>
      <h1>Home</h1>
      <nav>
          <ul>
            <li>
              <a href={`/`}>Home</a>
            </li>
            <li>
              <a href={`page1`}>Page1</a>
            </li>
          </ul>
        </nav>
    </div>
  )
}

export default App

import { Helmet } from "react-helmet-async";

export const Page1 = () => {
  const componentName = "Page1";
  return (
    <div>
      <Helmet>
        <title>{componentName}</title>
      </Helmet>
      <h1>Page1</h1>
      <nav>
        <ul>
          <li>
            <a href={`/`}>Home</a>
          </li>
          <li>
            <a href={`page1`}>Page1</a>
          </li>
        </ul>
      </nav>
    </div>
  );
};

按照这种方式，当页面发生导航时，可以将导航后的页面标题设为组件名称。

结束

如果运用这项技术，就可以实现诸如将详细画面的标题设为所选对象名称的功能。

只需添加组件，就能轻松完成，非常方便啊。

首先