URL -Metadaten Vorschau funktioniert nicht mit React Router ⇐ HTML

[Anonymous]

Ich habe eine React.js -Website, auf der das React Router -Plugin für verschiedene Routen für verschiedene Routen geleitet wird, wie unten in meiner App.js -Datei: < /p>
angezeigt wird

Code: Select all

import React from 'react';
import {
BrowserRouter as Router,
Routes,
Route
} from "react-router-dom";

import Sidebar from "./Components/Sidebar/Sidebar.js"
import Home from "./Components/Home/Home.js"
import Discogs2Youtube from './Components/Discogs2Youtube/Discogs2Youtube';

function App() {
const homeIconPath = "./ico/martinbarker.ico";

return (








);
}

export default App;
< /code>
Ich möchte benutzerdefinierte Tag-Vorschau für jede Route haben, wenn ich die URL auf Twitter, Discord usw.  teileimport React, { useState, useEffect, useRef } from 'react';
import { Helmet } from 'react-helmet-async';
import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css';
import styles from './Discogs2Youtube.module.css';

function Discogs2Youtube() {
return (


Discogs2YouTube


{/* Google / Search Engine Tags */}




{/* Facebook Meta Tags */}






{/* Twitter Meta Tags */}






Page Content


);
}

export default Discogs2Youtube;

But when I test my production URL "https://jermasearch.com/discogs2youtube" in a website such as "https://www.heymeta.com/results?url=htt ... gs2youtube", I can see there is no social media card preview for the URL:

Ich denke, die Meta -Tags kommen aus meiner Index.html -Datei, die in React:
leer ist, in ReAct:

Code: Select all

Wie kann ich für jede einzelne Route eindeutige URL-Vorschau-Vorschriften für soziale Medien hinzufügen?>