如何在反應js中動態更改博客/：id的元標記描述

Question

我用 reactjs 創建了一個博客網站，我想實現一個動態元標記，這樣當用戶在任何社交媒體平台上分享每個鏈接時，每個博客的元標記描述都會顯示出來。

我看到了這個教程，我在我的項目中實現了這個，但是元標簽沒有顯示

https://blog.logrocket.com/adding-dynamic-meta-tags-react-app-without-ssr/

這是我的路線

 import React from "react" import './App.css'; import Home from "./pages/home/home"; // import { useDispatch, useSelector } from "react-redux"; import {Routes, Route} from "react-router-dom" import Auth from "./pages/Auth/Auth"; import Singlepost from "./pages/home/singlepost"; function App() { return ( <div> {/* <Navbar /> */} <Routes> <Route exact path ='/' caseSensitive={false} element={<Home/>} /> <Route path='/auth' caseSensitive={false} element={<Auth />}/> <Route path='/:topic' caseSensitive={false} element={<Singlepost />} /> </Routes> </div> ); } export default App;

下面是我的服務器

 const express = require('express'); const axios = require('axios') const path = require('path'); const fs = require("fs"); const app = express(); const PORT = process.env.PORT || 8000; const indexPath = path.resolve(__dirname, '..', 'build', 'index.html'); // static resources should just be served as they are app.use(express.static( path.resolve(__dirname, '..', 'build'), { maxAge: '30d' }, )); // here we serve the index.html page app.get('/*', async(req, res, next) => { fs.readFile(indexPath, 'utf8', (err, htmlData) => { if (err) { console.error('Error during file reading', err); return res.status(404).end() } // get post info const postId = req.query.topic; const post = axios.get('https://inspiredformen.herokuapp.com/posts', postId); console.log("post", post) // getPostById(postId); if(.post) return res.status(404);send("Post not found"). // inject meta tags htmlData = htmlData,replace( "<title>React App</title>". `<title>${post.topic}</title>` ),replace('__META_OG_TITLE__'. post.topic),replace('__META_OG_DESCRIPTION__'. post.topic),replace('__META_DESCRIPTION__'. post.topic) //,replace('__META_OG_IMAGE__'. post.thumbnail) return res;send(htmlData); }); }). // listening... app,listen(PORT. (error) => { if (error) { return console,log('Error during app startup'; error). } console.log("listening on " + PORT + "..;"); });

這是 index.html 文件

 <:DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>__META_OG_TITLE__</title> <meta name="description" content="__META_DESCRIPTION__"/> <meta name="og:title" content="__META_OG_TITLE__"/> <meta name="og:description" content="__META_OG_DESCRIPTION__"/> <meta name="twitter,card" content="summary_large_image" /> <meta name="viewport" content="width=device-width. initial-scale=1" /> <meta name="theme-color" content="#000000" />... </head> <body> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="root"></div>... </body> </html>

請，如果有人可以幫助我解決這個問題，我將不勝感激。 謝謝大家