使用SSR时如何让头盔插入标题和元数据

时间:2018-10-10 03:09:36

标签: reactjs meteor react-helmet

我正在尝试在流星应用程序中使用SSR设置Helmet npm,但我不确定该如何做才能使页面标题和元数据出现在我的主页上。没有错误,但是,我是使用SSR的新手,所以我没有关注我在这里缺少的内容。问题。

路径:server/main.js

import React from "react";
import PropTypes from 'prop-types';
import { onPageLoad } from "meteor/server-render";
import { renderToNodeStream } from "react-dom/server";
import { ServerStyleSheet } from "styled-components"
import Helmet from 'react-helmet';  

import App from "/imports/server/app/App";

onPageLoad(sink => {
  const sheet = new ServerStyleSheet();
  const appJSX = sheet.collectStyles(
    <App location={sink.request.url} />
  );

  App.propTypes = {
    location: PropTypes.object,
  };


  const htmlStream = sheet.interleaveWithNodeStream(
    renderToNodeStream(appJSX)
    );

  sink.renderIntoElementById("react-root-app", htmlStream);

  const helmet = Helmet.renderStatic();
  sink.appendToHead(helmet.meta.toString());
  sink.appendToHead(helmet.title.toString());

});

路径:client/hompage.jsx

import Helmet from 'react-helmet';

const Home = () => (
  <div>
    <Helmet>
        <title>Homepage</title>
        <meta name="description" content="This is homepage. Just Helmet SSR demo" />
        <meta property="og:title" content="This is homepage. Just Helmet SSR demo for OG" />
      </Helmet>
    <h1>Home</h1>
  </div>
);

0 个答案:

没有答案