Предварительный просмотр метаданных URL не работает с React Router ⇐ Html

[Anonymous]

У меня есть веб -сайт React.js, который использует плагин REACT Router для направления различных компонентов для разных маршрутов, как показано ниже в моем файле App.js: < /p>

Код: Выделить всё

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>
Я хочу иметь пользовательские предварительные просмосы для каждого маршрута, когда я делюсь URL в Twitter, Discord и т. Д.  Я пытаюсь сделать это с помощью метода react-helmet-async, как SO: < /p>
import 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;

Но когда я тестирую свой производственный URL "https://jermasearch.com/discogs2youtube" на веб -сайте, такого как "https://www.heymeta.com/results?url=htt ... gs2youtube? />
Я думаю, что метатеги поступают из моего файла index.html, который пуст, как видно ниже в React:

Код: Выделить всё

Как я могу добавить уникальные данные предварительного просмотра URL в социальных сетях для каждого отдельного маршрута?>

Подробнее здесь: https://stackoverflow.com/questions/795 ... act-router