He estado usando la documentación de https://developers.facebook.com/docs/plugins/like-button/ para crear un botón Me gusta en mi aplicación web de reacción. siguió la documentación y generó el script y div.
Se agregó el Script justo debajo de la etiqueta del cuerpo en index.html como se muestra a continuación.
<body> <div id="fb-root"></div> <script async defer crossOrigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v11.0" nonce="pyP98Sf3"></script>Luego, en App.js, el div "similar a fb" a continuación colocado en la ruta predeterminada como se muestra a continuación funciona sin problemas.
function App() { return ( <Router> <div> <Route path='/' exact render={() => ( <Items items={items}/> <div className="fb-like" data-href="http://localhost:3000/something" data-width="" data-layout="standard" data-action="like" data-size="small" data-share="true"></div>Sin embargo, cuando mi div "similar a fb" se coloca dentro de otra ruta como se muestra a continuación, el botón Me gusta no aparece cuando navego a la página. Aparece si navego a la página y la actualizo.
<Route path='/item-detail/:handle' render={()=>( <> <div className="fb-like" data-href="http://localhost:3000/item-detail/Chocolate%20Cake" data-width="" data-layout="standard" data-action="like" data-size="small" data-share="true"></div> <ItemDetail/> </>Realmente no entiendo la razón detrás de este comportamiento. Agradezco si alguien me puede ayudar con una solución a esto.
Pude resolver este problema al tener el elemento DOM dentro del componente ItemDetails e insertar el Script usando el gancho useEffect. Se eliminó el Script en el cuerpo del archivo HTML.
const ItemDetail = () => { const {handle} = useParams() const location = useLocation() const loadScript = () => { let script = document.createElement("script"); script.setAttribute("crossOrigin","anonymous"); script.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v11.0"; script.setAttribute("nonce","pyP98Sf3"); script.type = "text/javascript"; document.body.append(script); } useEffect(loadScript, []) return( <div className="fb-like" data-href="http://localhost:3000/item-detail/Chocolate%20Cake" data-width="" data-layout="standard" data-action="like" data-size="small" data-share="true"></div> ) }Una publicación "Cargar secuencias de comandos en un componente específico (ruta) en React" de Kaushal Madani me ayudó a tener la idea de insertar la secuencia de comandos cuando se monta el componente.
enlace - Cargar scripts en un componente específico (ruta) en React