0
300
VistasReact js cambia las etiquetas meta dinámicamente
Tengo dos flujos de mi aplicación, uno es del lado del usuario y el otro es del lado del administrador . Mi lado de usuario responde, así que quiero que la etiqueta meta diga <meta name="viewport" content="width=device-width, initial-scale=1" /> y mi lado de administrador no responde, así que quiero hacer cumplir el navegador abrir en modo de escritorio, lo que requiere que esta metaetiqueta sea así <meta name="viewport" content="width=1024" />
Estoy usando react-document-meta con los siguientes objetos
const metaUser = { title: "User meta tags", description: "Basically make the application responsive when on user side", meta: { name: { keywords: "viewport" }, content: "width=device-width, initial-scale=1", }, }; const metaAdmin = { title: "Admin meta tags", description: "Make the application default in desktop mode", meta: { name: { keywords: "viewport" }, content: "width=1024", }, };pero crea un nuevo meta en la etiqueta principal y esas etiquetas no funcionan
1 Respuestas
Responde la pregunta0
Sugiero usar react-helmet .
Puede instalarlo usando el comando npm: npm i react-helmet
Y luego importe en su componente/página:
import {Helmet} from "react-helmet"; Y use todas sus etiquetas dentro del componente Helmet , que colocaría dentro de la etiqueta head normal en html , con la sintaxis de jsx
<Helmet> <title>{`${admin ? "Admin Title" : "Client Title"}`}</title> <meta name="description" content={`${admin ? "Admin Content" : "Client Content"}`} /> </Helmet>