javascript - 如何使用 ReactJS 路由器为页面设置每个页面的自定义 META 和相关信息

Question

我是 ReactJS 的新手，我已经使用 Router 设置了我的新项目并添加了几个页面，所以我的问题是如何为每个自定义页面设置不同的 head meta 和其他标签。这是否会由 Google 呈现并将我的页面作为普通页面显示给 Google？

Answer 1

您可以使用 react-helmet 设置元和其他标签。
从这里安装 https://www.npmjs.com/package/react-helmet
建议 -> 创建一个组件并设置 Prop 。
像这样的东西

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>
    );
  }
};