ReactJS - 頭盔元件（Helmet）

Web 文件的元資訊對於 SEO 非常重要。文件的元資訊通常在 head 部分使用 meta 標籤指定。title 標籤在提供文件的元資訊方面也發揮著重要作用。Head 部分還將包含 script 和 style 標籤。Helmet 元件透過提供所有有效的 head 標籤，提供了一種簡單的方法來管理文件的 head 部分。Helmet 將收集其內部指定的所有資訊，並更新文件的 head 部分。

讓我們在本節學習如何在 React 中使用 Helmet 元件。

安裝 Helmet

在學習 Helmet 的概念和用法之前，讓我們先學習如何使用 npm 命令安裝 Helmet 元件。

npm install --save react-helmet

上述命令將安裝 Helmet 元件，並使其在我們的應用程式中可以使用。

Helmet 的概念和用法

Helmet 接受所有有效的 head 標籤。它接受普通的 HTML 標籤，並將標籤輸出到文件的 head 部分，如下所示：

import React from "react";
import {Helmet} from "react-helmet";
class Application extends React.Component {
   render () {
      return (
         <div className="application">
            <Helmet>
               <title>Helmet sample application</title>
               <meta charSet="utf-8" />
               <meta name="description" content="Helmet sample program to understand the working of the helmet component" />
               <meta name="keywords" content="React, Helmet, HTML, CSS, Javascript" />
               <meta name="author" content="Peter" />
               <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            </Helmet>
            // ...
         </div>
      );
   }
};

這裡：

title 用於指定文件的標題
description meta 標籤用於指定文件的詳細資訊
keywords 用於指定文件的主要關鍵詞。搜尋引擎將使用它。
author 用於指定文件的作者
viewport 用於指定文件的預設視口
charSet 用於指定文件中使用的字元集。

head 部分的輸出如下：

<head>
   <title>Helmet sample application</title>
   <meta charSet="utf-8" />
   <meta name="description" content="Helmet sample program to understand the working of the helmet component" />
   <meta name="keywords" content="React, Helmet, HTML, CSS, Javascript" />
   <meta name="author" content="Peter" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

Helmet 元件可以在任何其他 React 元件內部使用以更改 header 部分。它也可以巢狀，以便在渲染子元件時更改 header 部分。

<Parent>
   <Helmet>
      <title>Helmet sample application</title>
      <meta charSet="utf-8" />
      <meta name="description" content="Helmet sample program to understand the working of the helmet component" />
      <meta name="keywords" content="React, Helmet, HTML, CSS, Javascript" />
      <meta name="author" content="Peter" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   </Helmet>
   <Child>
      <Helmet>
         <title>Helmet sample application :: rendered by child component</title>
         <meta name="description" content="Helmet sample program to explain nested feature of the helmet component" />
      </Helmet>
   </Child>
</Parent>

這裡：

子元件中的 Helmet 將更新 head 部分，如下所示：

<head>
   <title>Helmet sample application :: rendered by child component</title>
   <meta charSet="utf-8" />
   <meta name="description" content="Helmet sample program to explain nested feature of the helmet component" />
   <meta name="keywords" content="React, Helmet, HTML, CSS, Javascript">
   <meta name="author" content="Peter">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

應用 Helmet

讓我們在本節建立一個新的 React 應用程式，學習如何在其中應用 Helmet 元件。

首先，使用以下命令建立一個新的 React 應用程式並啟動它。

create-react-app myapp
cd myapp
npm start

接下來，開啟 App.css (src/App.css) 並移除所有 CSS 類。

// remove all css classes

接下來，建立一個簡單的元件，SimpleHelmet (src/Components/SimpleHelmet.js) 並渲染：

import React from "react";
import {Helmet} from "react-helmet";
class SimpleHelmet extends React.Component {
   render() {
      return (
         <div>
            <Helmet>
               <title>Helmet sample application</title>
               <meta charSet="utf-8" />
               <meta name="description" content="Helmet sample program to understand the working of the helmet component" />
               <meta name="keywords" content="React, Helmet, HTML, CSS, Javascript" />
               <meta name="author" content="Peter" />
               <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            </Helmet>
            <p>A sample application to demonstrate helmet component.</p>
         </div>
      )
   }
}
export default SimpleHelmet;

這裡我們有：

從 react-helmet 包中匯入了 Helmet
在元件中使用 Helmet 更新 head 部分。

接下來，開啟 App 元件 (src/App.js)，並使用 SimpleHelmet 元件，如下所示：

import './App.css'
import React from 'react';
import SimpleHelmet from './Components/SimpleHelmet'

function App() {
   return (
      <div className="container">
         <div style={{ padding: "10px" }}>
            <div>
               <SimpleHelmet />
            </div>
         </div>
      </div>
   );
}
export default App;

這裡我們有：

從 react 包中匯入了 SimpleHelmet 元件
使用了 SimpleHelmet 元件

接下來，開啟 index.html (public/index.html) 檔案並移除 meta 標籤，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
   <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
   <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
   <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
</head>
<body>
   <noscript>You need to enable JavaScript to run this app.</noscript>
   <div style="padding: 10px;">
      <div id="root"></div>
   </div>
</body>
</html>

這裡：

title 標籤被移除
meta 標籤（描述、主題顏色和視口）被移除

最後，在瀏覽器中開啟應用程式並檢查最終結果。

在開發者工具中開啟原始碼，您可以看到如下所示的 html 資訊：

<title>Helmet sample application</title>
<meta charset="utf-8" data-react-helmet="true">
<meta name="description" content="Helmet sample program to understand the working of the helmet component" data-react-helmet="true">
<meta name="keywords" content="React, Helmet, HTML, CSS, Javascript" data-react-helmet="true">
<meta name="author" content="Peter" data-react-helmet="true">
<meta name="viewport" content="width=device-width, initial-scale=1.0" data-react-helmet="true">

總結

Helmet 元件是一個易於使用的元件，用於管理文件的 head 內容，支援伺服器端和客戶端渲染。

列印頁面