如何使用 ReactJS 路由器為每個頁面設置自定義 META 和相關信息

Question

我是 ReactJS 的新手，我已經使用路由器設置了我的新項目並添加了一些頁面，所以我的問題是如何為每個自定義頁面設置不同的頭部元和其他標簽。 這會由谷歌呈現並將我的頁面作為普通頁面顯示給谷歌嗎？

Answer 1

您可以使用 react-helmet 設置元和其他標簽。

從這里安裝https://www.npmjs.com/package/react-helmet

建議 -> 創建一個組件並使用道具進行設置。

像這樣的東西

import React from "react";
import {Helmet} from "react-helmet";
 
class Application extends React.Component {
  render () {
    return (
        <div className="application">
            <Helmet>
                <meta charSet="utf-8" />
                <title>My Title</title>
                <link rel="canonical" href="http://example.com/" />
            </Helmet>
            ...
        </div>
    );
  }
};