如何在 React 单页应用程序中使用动态元标记？

Question

我正在为单页应用程序使用 react.js。 路由代码在 src 内 --> routes.js 我已经参考了很多页面，其中一页是 https://blog.logrocket.com/adding-dynamic-meta-tags-react-app-without-ssr/ 但我不知道在哪里实施。 我完全按照他们提到的做了，但通常我们使用“npm start”到 运行 前端。 即使在执行“npm 运行 server”之后，它也显示正在侦听端口 3000。但是元标记值仍然像这样“title_ " .

请参考任何意识形态来实现这一点。

this is the folder structure i have use

Answer 1

我们可以使用反应头盔动态更改每个页面上的元内容。就我而言，我在 header 上使用了头盔，因为网站上的所有页面都有一个 header。从 header，我们可以动态更改元内容。

https://www.npmjs.com/package/react-helmet

render(){
return(<>
 <Helmet>
<title>{this.state.metaContent.meta_title}</title>
<meta name="title" content={"Your dynamic content"} />
<meta name="description" content={"Your dynamic content"} />
</Helmet>
//your content
</>)}