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

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

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

解决方法

您可以使用 react-helmet 设置 meta 和其他标签。

从这里安装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>
    );
  }
};