如何预渲染使用 React 的单页应用程序？
How to prerender single page app that uses React?
在我的应用程序中，用户有自己的个人资料页面，其中有他们的个人资料图片（我使用 React Router 来处理客户端的路由）。
我想做的是：当用户将 link 发送到他在 messenger/slack/twitter 上的个人资料时，link 的缩略图应该是他的个人资料照片。
我知道我需要通过发送正确的元标记来做到这一点，即
<meta property="og:image" content="url-image.jpg">
但我不确定如何实现它，我应该了解什么？我找到了一个叫做 prerender 的东西，但我不确定它是否适用于 React
经过一些研究，我认为唯一的原因是服务器端渲染。看起来 Facebook 不关心加载 JavaScript 并且不会检测 <head> 部分中的更改。我通过构建一个简单的 React 应用程序来检查这一点，该应用程序在 componentWillMount() 部分设置 OG 数据。 Facebook debugger 找不到 headers。
所以您问题的答案实际上取决于您使用的 back-end 类型。在将响应发送到客户端之前，您需要设置元数据。
在您的情况下，您可能想要使用 react-helmet。它是一个文档头管理器，支持 server-rendering.
在我的应用程序中，用户有自己的个人资料页面，其中有他们的个人资料图片（我使用 React Router 来处理客户端的路由）。
我想做的是：当用户将 link 发送到他在 messenger/slack/twitter 上的个人资料时，link 的缩略图应该是他的个人资料照片。
我知道我需要通过发送正确的元标记来做到这一点，即
<meta property="og:image" content="url-image.jpg">
但我不确定如何实现它，我应该了解什么？我找到了一个叫做 prerender 的东西，但我不确定它是否适用于 React
经过一些研究，我认为唯一的原因是服务器端渲染。看起来 Facebook 不关心加载 JavaScript 并且不会检测 <head> 部分中的更改。我通过构建一个简单的 React 应用程序来检查这一点，该应用程序在 componentWillMount() 部分设置 OG 数据。 Facebook debugger 找不到 headers。
所以您问题的答案实际上取决于您使用的 back-end 类型。在将响应发送到客户端之前，您需要设置元数据。
在您的情况下，您可能想要使用 react-helmet。它是一个文档头管理器，支持 server-rendering.