如何在react js中设置动态meta标签？

Question

我正在制作一个网站，我试图从后端动态设置元标记我使用 Laravel 作为后端并使用 React JS 作为前端，但它不起作用我已经尝试过 Helmet 但它也不起作用所以请任何人帮助我。谢谢你

React.js 18 版本无法工作水合物

https://react.dev/reference/react-dom/ Hydro

头盔不起作用

<Helmet>
    <title>{title}</title>
    <meta name="description" content={title} />
    <meta property="og:title" content={title} />
    <meta property="og:description" content={title} />
    <meta property="og:image" content={image} />
</Helmet>

npm i react-helmet-async

图书馆不工作

Answer 1

如果您在 React js 中有前端项目并且在 php-laravel 中创建了 API，那么您希望在发布详细 api 调用时从服务器获取请求。

您可以在特定的API中设置中间件集并获取来自facebook、whastapp、twitter等的请求。就像...

<?php

命名空间 App\Http\Middleware;

使用闭包； 使用 Illuminate\Http\Request;

社交媒体中间件类 { /** * 处理传入的请求。 * * @param \Illuminate\Http\Request $request * @param \Closure(\Illuminate\Http\Request): (\Illuminate\Http\Response|\Illuminate\Http\RedirectResponse) $next * @return \Illuminate\Http\Response|\Illuminate\Http\RedirectResponse */ 公共函数句柄（请求$ request，关闭$ next） { $userAgent = $request->header('用户代理'); if (strpos($userAgent, 'facebookexternalhit') !== false) { $request->attributes->add(['social_media' => 'facebook']); } elseif (strpos($userAgent, 'Twitterbot') !== false) { $request->attributes->add(['social_media' => 'twitter']); } 返回$下一个（$请求）； } }

您将从服务器获取此关键字并获得比您可以设置元标记。