Cómo establecer un título de pestaña en React
Establecer el título de una pestaña en React es esencial para mejorar la experiencia del usuario y el SEO de tu aplicación web. En este artículo, aprenderás cómo cambiar dinámicamente el título de una pestaña utilizando React.
Uso del Hook useEffect
En React, puedes cambiar el título de una pestaña mediante la manipulación del document.title. El Hook useEffect es una herramienta ideal para realizar este cambio, ya que permite ejecutar código cuando un componente se monta o actualiza.
Ejemplo básico
import React, { useEffect } from 'react';
function App() {
useEffect(() => {
document.title = "Mi título dinámico";
}, []); // El array vacío asegura que esto se ejecute solo al montar el componente.
return (
<div>
<h1>¡Bienvenido a mi aplicación!</h1>
</div>
);
}
export default App;Cambiar el título dinámicamente
Si necesitas que el título cambie en función de alguna variable, puedes incluir esa variable en la dependencia del useEffect.
import React, { useState, useEffect } from 'react';
function DynamicTitleApp() {
const [pageTitle, setPageTitle] = useState("Página inicial");
useEffect(() => {
document.title = pageTitle;
}, [pageTitle]); // El título cambia cada vez que pageTitle se actualiza.
return (
<div>
<h1>{pageTitle}</h1>
<button onClick={() => setPageTitle("Nueva página")}>Cambiar título</button>
</div>
);
}
export default DynamicTitleApp;Librerías útiles
Si prefieres una solución más estructurada, puedes usar librerías como React Helmet. Esta herramienta facilita la gestión de metadatos, incluidos los títulos de las pestañas.
Ejemplo con React Helmet
import React from 'react';
import { Helmet } from 'react-helmet';
function HelmetApp() {
return (
<div>
<Helmet>
<title>Mi título con React Helmet</title>
</Helmet>
<h1>Usando React Helmet</h1>
</div>
);
}
export default HelmetApp;Referencias
Consulta la documentación oficial de React para aprender más sobre useEffect y otras características útiles: React Documentation.
Jorge García
Fullstack developer