Question

我正在尝试使用react + react路由器+ react头盔app设置netlify prerendering。我正在尝试在标记中显示页面标题，并在抓取页面时显示一些打开的图形元标记。

这是调用react-helmet的代码：

    <Helmet>
      <title>{entry.title} — Road Trip en Islande</title>
      <meta name="description" content="Nested component" />
      <meta property="og:title" content={entry.title} />
      <meta property="og:url" 
        content={`https://roadtrips.iwazaru.fr/entry/${entry.id}`} />
    </Helmet>

来自https://github.com/iwazaru/road-trips/blob/fb0d93af1d441b5f4378ee5d3e6f3bf0724b22e3/src/components/Entry/Entry.js

它在浏览器中无需预渲染即可运行： https://roadtrips.iwazaru.fr/entry/S

当使用netlify prerender进行本地预约时，它也有效，正确的标题和打开的图形标记会显示在预呈现的html中。

但是当使用facebook调试器抓取页面时，虽然页面的其余部分已正确预呈现，但我放入反应头盔的任何内容似乎都没有预呈现： https://developers.facebook.com/tools/debug/echo/?q=https%3A%2F%2Froadtrips.iwazaru.fr%2Fentry%2FS

我做错了吗？

Answer 1

解决了它。问题显然是index.html模板文件中有开放的图元标记，在react-helmet之前加载。我仍然无法解释为什么在本地使用prerender时会替换它们，而不是在使用netlify的预呈现时。

如何将反应头盔与netlify prerender一起使用？

1 个答案: