imy*_*ine 6 meta-tags reactjs react-helmet
有谁知道是否有可能在没有服务器端渲染的 React 应用程序中为每个页面设置真正的动态元标记？
\n在我正在构建的项目中，我有一些带有 /article/{Id} 之类的路线的页面，我想定义动态元标记（标题、图像、描述）。我使用反应头盔作为组件，但它在这里不起作用是我的组件的代码，代码页文章/ {id}的一部分，以及我的页面index.html
\n索引.html：
\n<!DOCTYPE html>\n<html lang="en">\n\n<head>\n <meta charset="utf-8" />\n <meta property="og:title" content="title" data-rh="true">\n<meta property="og:description" content="description" data-rh="true">\n<meta property="og:image" content="icon%20maracana%20app.png" data-rh="true">\n <meta name="viewport" content="width=device-width, initial-scale=1" />\n <meta name="theme-color" content="#000000" />\n <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />\n <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />\n <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css" />\n <link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet"\n type="text/css" />\n <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">\n <!-- Global site tag (gtag.js) - Google Analytics -->\n <script async src="https://www.googletagmanager.com/gtag/js?id=UA-173374516-1"></script>\n <script data-ad-client="ca-pub-7237319988145838" async\n src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>\n <script>\n window.dataLayer = window.dataLayer || [];\n function gtag() { dataLayer.push(arguments); }\n gtag('js', new Date());\n\n gtag('config', 'UA-173374516-1');\n </script>\n <!-- <script type="text/javascript" src="js/my_script.js"></script> -->\n <script src="https://cdnjs.cloudflare.com/ajax/libs/\xe2\x80\x8bmoment.js/2.19.1/moment.min.js"></script>\n</head>\n\n<body>\n <!-- Plugin Comments -->\n <div id="fb-root"></div>\n <script async defer crossorigin="anonymous"\n src="https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v9.0&appId=357191748915887&autoLogAppEvents=1"\n nonce="QVCodNV8"></script>\n <!-- ---------------- -->\n <noscript>You need to enable JavaScript to run this app.</noscript>\n <div id="root"></div>\n</body>\n\n</html>\n成分：
\nimport React from "react";\nimport PropTypes from "prop-types";\nimport { Helmet } from "react-helmet";\nimport { IMAGES_LINK, API_LINK } from '../../utils/constants'\n\n//const metaDecorator = require("../../data/metaDecorator");\nconst MetaDecorator = ({ title, description, imageUrl, imageAlt }) => {\n\n if (title != undefined & description != undefined & imageUrl != undefined & imageAlt != undefined) {\n return (\n <Helmet>\n <title>{title}</title>\n <meta property="og:title" content={title} />\n <meta name="description" content={description} />\n <meta property="og:description" content={description} />\n <meta property="og:image" content={API_LINK + imageUrl} />\n <meta\n property="og:url"\n content={"https://maracanafoot.com" + window.location.pathname + window.location.search}\n />\n <meta name="twitter:card" content="summary_large_image" />\n <meta name="twitter:image:alt" content={imageAlt} />\n {/* <meta name="twitter:site" content={metaDecoratortwitterUsername} /> */}\n </Helmet>\n\n );\n } else {\n return (\n <Helmet>\n </Helmet>\n );\n }\n}\nMetaDecorator.propTypes = {\n title: PropTypes.string.isRequired,\n description: PropTypes.string.isRequired,\n imageUrl: PropTypes.string.isRequired,\n imageAlt: PropTypes.string.isRequired,\n};\nexport default MetaDecorator;\n文章页面：
\n render = () => {\n const s = this.state;\n\n return (<>\n\n <div>\n \n {this.state.loadingArticle ? <>\n\n <br />\n <div style={this.styleSpinner} className='mt-3 mb-3'>\n <ImpulseSpinner size={30} color="#208FDF" loading={this.state.loadingArticle} />\n </div></>\n : null}\n {!this.isEmpty(this.state.article) ? <>\n \n \n <MetaDecorator\n description={this.state.article.resumer}\n title={this.state.article.title}\n imageUrl={this.state.article.image}\n imageAlt="image alt"\n />\n\n预先感谢您的任何提示！
\n| 归档时间： |
|
| 查看次数： |
3066 次 |
| 最近记录： |