如何解决ReactJS 中带有 React 头盔的动态链接预览
有谁知道是否有可能在没有服务器端渲染的 React 应用程序中为每个页面设置真正的动态元标记？
在我正在构建的项目中，我有一些页面的路由类似于 / article / {Id}，我想定义动态元标记（标题、图像、描述）。我使用反应头盔作为组件，但它在这里不起作用是我的组件代码、代码页文章/{id} 的一部分和我的页面 index.html
index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta property="og:title" content="title" data-rh="true">
<meta property="og:description" content="description" data-rh="true">
<meta property="og:image" content="icon%20maracana%20app.png" data-rh="true">
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet"
type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-173374516-1"></script>
<script data-ad-client="ca-pub-7237319988145838" async
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js',new Date());
gtag('config','UA-173374516-1');
</script>
<!-- <script type="text/javascript" src="js/my_script.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment.min.js"></script>
</head>
<body>
<!-- Plugin Comments -->
<div id="fb-root"></div>
<script async defer crossorigin="anonymous"
src="https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v9.0&appId=357191748915887&autoLogAppEvents=1"
nonce="QVCodNV8"></script>
<!-- ---------------- -->
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
组件：
import React from "react";
import PropTypes from "prop-types";
import { Helmet } from "react-helmet";
import { IMAGES_LINK,API_LINK } from '../../utils/constants'
//const metaDecorator = require("../../data/metaDecorator");
const MetaDecorator = ({ title,description,imageUrl,imageAlt }) => {
if (title != undefined & description != undefined & imageUrl != undefined & imageAlt != undefined) {
return (
<Helmet>
<title>{title}</title>
<meta property="og:title" content={title} />
<meta name="description" content={description} />
<meta property="og:description" content={description} />
<meta property="og:image" content={API_LINK + imageUrl} />
<meta
property="og:url"
content={"https://maracanafoot.com" + window.location.pathname + window.location.search}
/>
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image:alt" content={imageAlt} />
{/* <meta name="twitter:site" content={metaDecoratortwitterUsername} /> */}
</Helmet>
);
} else {
return (
<Helmet>
</Helmet>
);
}
}
MetaDecorator.propTypes = {
title: PropTypes.string.isRequired,description: PropTypes.string.isRequired,imageUrl: PropTypes.string.isRequired,imageAlt: PropTypes.string.isRequired,};
export default MetaDecorator;
文章页面：
render = () => {
const s = this.state;
return (<>
<div>
{this.state.loadingArticle ? <>
<br />
<div style={this.styleSpinner} className='mt-3 mb-3'>
<ImpulseSpinner size={30} color="#208FDF" loading={this.state.loadingArticle} />
</div></>
: null}
{!this.isEmpty(this.state.article) ? <>
<MetaDecorator
description={this.state.article.resumer}
title={this.state.article.title}
imageUrl={this.state.article.image}
imageAlt="image alt"
/>
提前感谢您的提示！
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。