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

【问题标题】：How do I setup for Each page custom META and related Information for the Page with ReactJS Router如何使用 ReactJS 路由器为页面的每个页面自定义 META 和相关信息
【发布时间】：2021-02-15 20:09:46
【问题描述】：

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

【问题讨论】：

标签： javascript reactjs typescript seo

【解决方案1】：

你可以使用 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>
    );
  }
};

【讨论】：