使用react-snap进行SEO

Question

我正在使用react snap进行搜索引擎优化。

这是我所做的。

我在react应用程序的index.js中添加了以下内容

import React from 'react';
import { hydrate, render } from "react-dom";

const rootElement = document.getElementById("root");
if (rootElement.hasChildNodes()) {
    hydrate(<App />, rootElement);
} else {
    render(<App />, rootElement);
}

然后，我将以下内容添加到package.json中

"postbuild": "react-snap"

当我运行npm run build，并在页面上查看源代码时，我看不到页面所需的实时元描述和标题。

我做错了什么？

下面是我如何设置meta标签的。

在BookDetail.jsx中

import {Helmet} from "react-helmet";
<Helmet>
    <meta charSet="utf-8" />
    <title>{this.state.book.title} by {this.state.book.author} | Sumizeit</title>
    <meta name="description" content={this.state.book.desc}/>
</Helmet>

Answer 1

不要使用react-snap只需更改为next.js (react-snap有很多问题:受保护路由上的刷新错误、构建时间不开玩笑、内联css)...by您的代码中没有任何错误