Como mudar o title da página no React JS

Neste artigo você aprenderá a como mudar o title da página no React, uma ação importante para todos os projetos

Fala programador(a), beleza? Bora aprender mais sobre React JS!

Ao desenvolver aplicações web, uma das tarefas mais fundamentais e, muitas vezes, negligenciadas é a gestão do título da página (ou <title>).

Em sites tradicionais, essa tarefa é simples. No entanto, em aplicações React de página única, onde o conteúdo da página muda sem um carregamento completo da página, gerenciar o título pode ser um pouco mais complexo.

Felizmente, com as ferramentas e práticas certas, isso se torna uma tarefa fácil e intuitiva.

Neste artigo, mostraremos como mudar o título de sua página no React, especialmente em projetos criados com Vite.

Por que mudar o título da página?

Antes de entrarmos nos detalhes técnicos, vamos entender o “porquê” por trás desta ação. O título da sua página é crucial por vários motivos:

Experiência do Usuário (UX): O título ajuda os usuários a identificar rapidamente o conteúdo da guia aberta em seu navegador.
SEO: Os motores de busca, como o Google, dão grande importância aos títulos das páginas, utilizando-os para classificar e indexar o conteúdo.
Bookmarking: Quando os usuários marcam sua página, o título é o que geralmente aparece por padrão.

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

474 aulas
20 projetos
39h 27min

Mudando o `<title>` no arquivo `index.html` em um projeto React com Vite

Quando você cria uma aplicação React utilizando o Vite, o ponto de entrada da sua aplicação é geralmente o arquivo index.html.

Em muitos cenários, especialmente ao lidar com Single Page Applications (SPAs), você pode querer mudar o título padrão definido neste arquivo.

Vamos explorar como fazer isso e por que é importante.

Importância do `<title>` no `index.html`

O título inicial definido no index.html é o que os usuários verão primeiro ao carregar sua aplicação.

É também o título que será indexado por padrão pelos mecanismos de busca se sua página for escaneada antes que o JavaScript seja executado.

Por esses motivos, é crucial escolher um título significativo e relevante para sua aplicação.

Mudando o `<title>` no `index.html`

Mudar o <title> no index.html é um processo direto. Você simplesmente precisa localizar a tag <title> dentro da seção <head> e alterar seu conteúdo.

Abra o arquivo index.html: Este arquivo estará localizado na raiz do seu projeto ou dentro de uma pasta public, dependendo da configuração do seu projeto Vite.
Localize a tag <title>: Dentro da seção <head>, você encontrará algo parecido com:

<title>Nome do Projeto</title>

Mude o conteúdo: Altere “Nome do Projeto” para o título desejado. Por exemplo:

<title>Minha Aplicação React com Vite</title>

Usando o Hook `useEffect` para mudar o título

No React, o hook useEffect é uma forma eficaz de executar efeitos colaterais, como a mudança do título da página.

Exemplo:

import { useEffect } from 'react';

function PaginaExemplo() {
  useEffect(() => {
    document.title = 'Título da Minha Página';
  }, []); // A dependência vazia garante que isso aconteça apenas na montagem

  return <div>Conteúdo da minha página</div>;
}

Usando bibliotecas para gerenciar o título

Se você está buscando uma solução mais robusta, existem várias bibliotecas disponíveis para ajudar a gerenciar o <head> do documento, incluindo o título. Uma das mais populares é o react-helmet.

Como usar o react-helmet em projetos Vite:

Instalação:

npm install react-helmet

Uso:

import React from 'react';
import { Helmet } from 'react-helmet';

function PaginaExemplo() {
  return (
    <div>
      <Helmet>
        <title>Título da Minha Página com Helmet</title>
      </Helmet>
      Conteúdo da minha página
    </div>
  );
}

Com o react-helmet, não apenas o título, mas também outros elementos dentro do <head> podem ser gerenciados de forma declarativa diretamente em seus componentes React.

Trabalhando com Rotas

Se você estiver usando o react-router-dom para gerenciar as rotas de sua aplicação, pode ser útil atualizar o título da página com base na rota atual.

Exemplo:

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

function UsarTitulo(titulo) {
  const location = useLocation();

  useEffect(() => {
    if (location.pathname === '/rota-exemplo') {
      document.title = titulo;
    }
  }, [location, titulo]);
}

function PaginaExemplo() {
  UsarTitulo('Título da Rota Exemplo');

  return <div>Conteúdo da minha página</div>;
}

Quer aprender mais sobre programação? Conheça nosso canal no YouTube:

Conclusão

Gerenciar o título da sua página é uma parte essencial do desenvolvimento de uma aplicação web.

No React, com a combinação certa de hooks e, se necessário, bibliotecas como o react-helmet, essa tarefa se torna simples e eficiente.

Ao prestar atenção a esse detalhe, você melhorará a experiência do usuário e potencialmente a visibilidade de seu site nos motores de busca.

No ambiente Vite, essa implementação é tão simples quanto em qualquer outro ambiente React, permitindo que você se concentre no que realmente importa.

Está buscando em evoluir como Programador? Confira o nossos cursos de programação.

Um bloco novo com subtítulo "Criando um Hook personalizado para o título (reutilizável):" mostrando como encapsular o useEffect num hook próprio, que dá pra chamar em qualquer página. Sugestão de conteúdo e código:

Se você repete o mesmo useEffect em várias telas, dá pra isolar isso num hook só seu e reaproveitar em todo lugar

Outro ganho: guardar o título anterior e devolver ele quando o componente sai da tela, evitando que a guia fique com um título "preso" de outra página

import { useEffect } from ‘react’;

function useDocumentTitle(titulo) { useEffect(() => { const tituloAnterior = document.title; document.title = titulo;

return () => { document.title = tituloAnterior; }; }

Uso em qualquer componente:

function PaginaExemplo() { useDocumentTitle(‘Título da Minha Página’);

return <div>Conteúdo da minha página</div>; }

Uma seção "Perguntas frequentes:" com pares pergunta e resposta curtos, cada um resolvendo uma dúvida real. Sugestão:

Por que o título da página não está mudando? Geralmente é o array de dependências do useEffect: se o valor do título muda mas a dependência está vazia, o efeito roda só na montagem e não atualiza. Confira também se não tem outro trecho (ou uma biblioteca) sobrescrevendo o document.title depois

Devo usar useEffect ou uma biblioteca como react-helmet? Para um caso simples de trocar só o título, o useEffect (ou um hook próprio) já resolve. Quando você precisa gerenciar vários elementos do head de forma declarativa dentro dos componentes, uma biblioteca de head costuma deixar o código mais organizado

Como mudar o título conforme a rota? Basta ler a rota atual (por exemplo com useLocation do react-router-dom) e atualizar o document.title dentro de um useEffect que depende da localização, como no exemplo de rotas acima

O título muda antes do JavaScript carregar? Em uma SPA, o título inicial é o que está no index.html, e só depois o React troca por JavaScript. Por isso vale deixar um título significativo no index.html além de atualizar via código

Uma observação curta de contexto e de escolha, sem trocar o exemplo existente:

Dependendo do cenário do seu projeto (por exemplo, aplicações com renderização no servidor ou uso mais avançado do head), pode valer avaliar outras opções de bibliotecas de gerenciamento de head disponíveis no ecossistema React, comparando qual encaixa melhor no seu setup antes de sair instalando