reactjs - react-helmet Meteor 服务器端渲染
问题描述
我想在 Meteor 上实现 react-helmet。客户端工作正常,我可以看到 Inspect Element 上的标签- 但是如何在服务器端呈现它以进行 SEO?我不明白文档。
ReactDOMServer.renderToString(<Handler />);
const helmet = Helmet.renderStatic();
我的代码如下
index.html(客户端)
<head>
<body>
<div id="target" />
</body>
</head>
main.js(客户端)
import React from 'react';
import { Meteor } from 'meteor/meteor';
import { render } from 'react-dom';
import { renderRoutes } from '../imports/startup/client/routes.jsx'
Meteor.startup(() => {
render(renderRoutes(), document.getElementById('target'));
});
我正在使用 React-Router 将元素渲染到“目标”
main.js(服务器)
如何从服务器获取标签。
import { onPageLoad } from 'meteor/server-render';
Meteor.startup(() => {
onPageLoad((sink) => {
const helmet = Helmet.renderStatic();
sink.appendToHead(helmet.meta.toString());
sink.appendToHead(helmet.title.toString());
});
});
关于代码helmet.meta.toString()
返回空。我知道我们需要传递一些东西让头盔知道元标签。但是如何做到这一点
有人可以帮助我了解我需要在服务器上写什么才能使其正常工作吗?除此以外的一切工作正常。
解决方案
最后我找到了解决方案:
main.js(服务器)上的代码应该如下
import ReactDOMServer from 'react-dom/server';
import { StaticRouter } from 'react-router-dom';
import {renderRoutes} from '../imports/startup/both/routes.jsx'
// ...
onPageLoad((sink) => {
const context = {};
const app = ReactDOMServer.renderToString(
<StaticRouter location={sink.request.url} context={context}>
{renderRoutes()}
</StaticRouter>
);
sink.renderIntoElementById('react-root', app);
const helmet = Helmet.renderStatic();
sink.appendToHead(helmet.meta.toString());
sink.appendToHead(helmet.title.toString());
});
希望它可以帮助将来可能遇到相同问题的人。:)
推荐阅读
- c# - 如何在 C# Windows 窗体的 MS 图表中添加次要刻度线?
- php - php广告中的反序列化函数结果字符串的额外斜杠
- sql-server-2008 - 当表 1 中出现新值时,如何自动更新表 2 中的值
- angular - 我已经为不同的组件创建了模块,但是 loadChildren 不适用于模块
- jquery - JQuery 数据表按钮不工作/不显示
- python - Tflite 在 python 解释器和 iOS 中给出不同的准确性/行为
- java - 在不触发触发器的情况下启动 Quartz Scheduler
- arrays - 快速从 JSON 创建一个数组
- kubernetes - 过期后更新 kubernetes pki
- ibm-cloud - IBM Watson STT:如何使用具有多个块的 Websocket 接口?