使用 react-helmet 的一个重要优点是当你在树中有多个带有 <head>
标签的组件,并且这些组件带有相同属性/值的 <meta>
标签时。
例如,如果在你的首页组件中有:
const html = renderToString(<App />);
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="description" content="This is the index page description">
<title>A Cool Index Page</title>
</head>
</html>
但是在一个叶子页面组件上,您还有一个包含标签的<head>
标签:
<html>
<head>
<meta name="description" name="This is the unique leaf page description">
<title>A Cool Leaf Page</title>
<link rel="stylesheet" href="${ROOT}/static/index.css">
</head>
</html>
请注意,在我们的两个页面组件之间,有两个具有相同属性值name="description"
的meta标签。你可能会认为这会导致重复,但是react-helmet
解决了这个问题。
如果有人进入叶子页面,react-helmet会覆盖索引/站点级别的描述meta标签,并呈现较低级别的标签,即专门针对叶子页面的标签。
它还将包含viewport meta标签,因为它不需要被覆盖。
由于react-helmet
,在叶子页面上,<head>
将如下所示:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="description" name="This is the unique leaf page description">
<title>A Cool Leaf Page</title>
<link rel="stylesheet" href="${ROOT}/static/index.css">
</head>
</html>
helmet
更新<title>
,但是您的用户实际上从未离开过第一页。 - Mike 'Pomax' Kamermans