create-react-app Title（网页标题） 和 Meta 标签
🌙
手机阅读
本文目录结构
在服务器上生成动态
Title（网页标题） 和 Meta 标签
更改标题标签
你可以在生成的项目的 public 文件夹中找到 HTML 源文件。
你可以编辑其中的 <title> 标签，将标题从 “React App” 更改为其他任何内容。
请注意，通常你不会经常编辑 public 文件夹中的文件。例如，在不触及 HTML 的情况下 添加样式表。
- 如果需要根据内容动态更新页面标题，可以使用浏览器
document.title API。 - 对于更复杂的方案，当你想要从 React 组件更改标题时，可以使用 React Helmet 第三方库。
如果你在生产环境中为自己的应用程序使用自定义服务器，并希望在将标题发送到浏览器之前修改标题，则可以按照 本章节中的建议操作。
或者，你可以将每个页面预构建为静态 HTML 文件，然后加载 JavaScript 包，此处将 在这篇文章中 对此进行介绍。
在服务器上生成动态 <meta> 标记
由于 Create React App 不支持服务器端渲染，你可能想知道如何动态修改 <meta> 标签化并反映当前的 URL。
要解决此问题，我们建议在 HTML 中添加占位符，如下所示：
<!doctype html>
<html lang="en">
<head>
<meta property="og:title" content="__OG_TITLE__">
<meta property="og:description" content="__OG_DESCRIPTION__">
然后，在服务器上，无论你使用哪个后端服务器，都可以将 index.html 读入内存并将 __OG_TITLE__ ， __OG_DESCRIPTION__ 和任何其他占位符替换为取决于当前 URL 的值。
只需确保清理和插值转义，以便将它们嵌入到 HTML 中是安全的！
如果使用 Node 服务器，甚至可以在客户端和服务器之间共享路由匹配逻辑。然而，重复它也可以在简单的情况下正常工作。
将数据从服务器注入页面
与上一节类似，你可以在 HTML 中保留一些注入全局变量的占位符，例如：
<!doctype html>
<html lang="en">
<head>
<script>
window.SERVER_DATA = __SERVER_DATA__;
</script>
然后，在服务器上，你可以在发送响应之前将 __SERVER_DATA__ 替换为实际 JSON 数据。
然后，客户端代码可以读取window.SERVER_DATA 以使用它。
确保在 将 JSON 发送到客户端之前对其进行清理，因为它会使你的应用容易受到 XSS 攻击。
