react-helmet Meteor 服务器端渲染答案

【问题标题】：react-helmet Meteor Server Side Renderingreact-helmet Meteor 服务器端渲染
【发布时间】：2019-06-03 14:29:44
【问题描述】：

我想在 Meteor 上实现 react-helmet。 客户端工作正常，我可以看到检查元素上的标签 - 但是如何在服务器端呈现它以进行 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() 返回空。我知道我们需要传递一些东西让头盔知道元标记。但是如何做到这一点

有人可以帮助我了解我需要在服务器上写什么才能使其正常工作吗？除此以外的一切都运行良好。

【问题讨论】：

任何帮助任何人请:(！
查看源码时看到组件的html标签了吗？
@Muljayan 只是头部和身体。不是单独的身体标签。但我只需要将头盔生成的元标记附加到页面的服务器端渲染。我怎样才能使用上述文件做到这一点。
blog.meteor.com/meteor-platform-is-still-alive-5f6426644555 流星博客上的这个博客可能会有所帮助。它有一个使用 react-helmet 的示例
sink.renderIntoElementById('app', renderToString(<App location={sink.request.url} />));

标签： reactjs meteor react-redux react-router react-helmet

【解决方案1】：

终于找到了解决办法：

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());
  });

希望它对将来可能遇到相同问题的人有所帮助。 :)

【讨论】：