时间戳

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

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

问题描述

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

标签： javascriptreactjstypescriptseo

解决方案

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

推荐阅读