请按照以下步骤进行操作:
第一步 - 使用NPM安装以下命令
npm install react-meta-tags --save
注意:您也可以使用
React Helmet(第三方库)来实现此目的。
第二步-在您的类组件中使用MetaTag组件。
import React from 'react';
import MetaTags from 'react-meta-tags';
class Component1 extends React.Component {
render() {
return (
<div className="wrapper">
<MetaTags>
<title>Your Page 1</title>
<meta name="description" content="Your description here.." />
<meta property="og:title" content="Your App" />
<meta property="og:image" content="Your path/to/image.jpg" />
</MetaTags>
<div className="content"> Your Content here... </div>
</div>
)
}
}
注意:在标签上定义id,这样如果您导航到其他页面,旧的元标记将被新的替换/更新。
第三步-ReactTitle组件:
如果您只想在页面上添加标题,您可以使用ReactTitle。
import React from 'react';
import {ReactTitle} from 'react-meta-tags';
class Component2 extends React.Component {
render() {
return (
<div className="wrapper">
<ReactTitle title="Your Page 2"/>
<div className="content"> Your Page 2 Content </div>
</div>
)
}
}
服务器使用示例:
import MetaTagsServer from 'react-meta-tags/server';
import {MetaTagsContext} from 'react-meta-tags';
app.use((req, res) => {
const metaTagsInstance = MetaTagsServer();
match({
routes, location: req.url
}, (error, redirectLocation, renderProps) => {
let reactString;
try{
reactString = ReactDomServer.renderToString(
<Provider store={store}>
{/*** If you are using redux ***/}
{/* You have to pass extract method through MetaTagsContext so it can catch meta tags */}
<MetaTagsContext extract = {metaTagsInstance.extract}>
<RouterContext {...renderProps}/>
</MetaTagsContext>
</Provider>
);
}
catch(e){
res.status(500).send(e.stack);
return;
}
const meta = metaTagsInstance.renderToString();
const htmlStr = (`
<!doctype html>
<html lang="en-us">
<head>
<meta charSet="utf-8"/>
${meta}
</head>
<body>
<div id="content">
${reactString}
</div>
</body>
</html>
`);
res.status(200).send(layout);
});
});
根据上述代码,我们需要执行以下操作以进行服务器渲染选项:
- 从服务器导入MetaTagsServer
- 从服务器导入MetaTagsContext
- 创建MetaTagsServer的新实例
- 将你的组件包裹在MetaTagsContext中,并将提取方法作为props传递
- 使用MetaTagsServer实例的renderToString提取Meta字符串
- 将Meta字符串附加到你的HTML模板中。
JSX布局:
如果你也是使用React来定义你的布局,那么你可以使用metaTagsInstance的getTags方法。上述服务器端示例的布局部分将如下所示。
//get all title and metatags as React elements
const metaTags = metaTagsInstance.getTags();
//append metatag string to your layout
const layout = (
<html lang="en-us">
<head>
<meta charSet="utf-8"/>
{metaTags}
</head>
<body>
<div id="app" dangerouslySetInnerHTML={{__html: reactString}} />
</body>
</html>
);
const htmlStr = ReactDomServer.renderToString(layout);
res.status(200).send(htmlStr);