Como você define o título do documento no React?

105

Gostaria de definir o título do documento (na barra de título do navegador) para meu aplicativo React. Eu tentei usar o react-document-title (parece desatualizado) e configurar document.titleno constructore componentDidMount()- nenhuma dessas soluções funciona.

javascript reactjs dom

— eli
fonte

desatualizado? @DanAbramov Acho que o react-document-title funciona bem com o React16 também.

— Vishal Gulati

Eu confirmo, react-document-title funciona muito bem com react 16.5

— Jo-Go

81

Você pode usar o Capacete React :

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

const TITLE = 'My Page Title'

class MyComponent extends React.PureComponent {
  render () {
    return (
      <>
        <Helmet>
          <title>{ TITLE }</title>
        </Helmet>
        ...
      </>
    )
  }
}

— quoteBro
fonte

isso irá 'piscar' o conteúdo do index.html no primeiro segundo, certo?

— nxmohamad

3

Esta deve ser definitivamente a melhor resposta. É uma excelente forma declarativa de gerenciar o título e outros atributos meta

— Ryall

111

import React from 'react'
import ReactDOM from 'react-dom'


class Doc extends React.Component{
  componentDidMount(){
    document.title = "dfsdfsdfsd"
  }

  render(){
    return(
      <b> test </b>
    )
  }
}

ReactDOM.render(
  <Doc />,
  document.getElementById('container')
);

Isso funciona para mim.

Edit: Se você estiver usando webpack-dev-server definido inline como true

— AlexVestin
fonte

4

Isso funciona, mas o título do documento ainda é "React App" enquanto a página está carregando - alguma ideia de como consertar isso?

— eli

7

Altere o conteúdo da tag de título em seu index.html

— AlexVestin

4

Melhor fazê-lo declarativamente como na resposta de @ quotesBro

— Ryall

1

Essa forma é adequada para SEO?

— Davidm176

@AlexVestin Não é uma boa ideia se você precisa de títulos diferentes para visualizações diferentes em seu aplicativo React

— Kevin

48

Para React 16.8, você pode fazer isso com um componente funcional usando useEffect .

Por exemplo:

useEffect(() => {
   document.title = "new title"
}, []);

Ter o segundo argumento como uma matriz chama useEffect apenas uma vez, tornando-o semelhante a componentDidMount.

— Jordan Daniels
fonte

Como isso pode ser testado com gracejos e enzimas?

— nickstaroba

16

Como já foi mencionado, você pode usar document.title = 'My new title'e Reagir Capacete para atualizar o título da página. Ambas as soluções ainda renderizarão o título 'React App' inicial antes de os scripts serem carregados.

Se você estiver usando, create-react-appo título do documento inicial é definido no arquivo de <title>tag /public/index.html.

Você pode editar isso diretamente ou usar um marcador que será preenchido com as variáveis ambientais:

/.env:

REACT_APP_SITE_TITLE='My Title!'
SOME_OTHER_VARS=...

Se por algum motivo eu quisesse um título diferente em meu ambiente de desenvolvimento -

/.env.development:

REACT_APP_SITE_TITLE='**DEVELOPMENT** My TITLE! **DEVELOPMENT**'
SOME_OTHER_VARS=...

/public/index.html:

<!DOCTYPE html>
<html lang="en">
    <head>
         ...
         <title>%REACT_APP_SITE_TITLE%</title>
         ...
     </head>
     <body>
         ...
     </body>
</html>

Essa abordagem também significa que posso ler a variável de ambiente do título do site em meu aplicativo usando o process.envobjeto global , o que é bom:

console.log(process.env.REACT_APP_SITE_TITLE_URL);
// My Title!

Veja: Adicionando Variáveis de Ambiente Personalizadas

— Gruffy
fonte

Certifique-se de colocar os arquivos .env no mesmo nível do seu arquivo package.json. :)

— Ian Smith

10

você deve definir o título do documento no ciclo de vida de 'componentWillMount':

componentWillMount() {
    document.title = 'your title name'
  },

— Alvin
fonte

7

componentWillMount () está obsoleto na última versão

— react

3

Neste caso, como na maioria dos casos, quando você tiver que remover o componentWillMount obsoleto, mova seu código para componentDidMount

— Jo-Go

9

Os portais React permitem renderizar para elementos fora do nó React raiz (como em <title>), como se fossem nós React reais. Agora você pode definir o título de maneira limpa e sem dependências adicionais:

Aqui está um exemplo:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class Title extends Component {
    constructor(props) {
        super(props);
        this.titleEl = document.getElementsByTagName("title")[0];
    }

    render() {
        let fullTitle;
        if(this.props.pageTitle) {
            fullTitle = this.props.pageTitle + " - " + this.props.siteTitle;
        } else {
            fullTitle = this.props.siteTitle;
        }

        return ReactDOM.createPortal(
            fullTitle || "",
            this.titleEl
        );
    }
}
Title.defaultProps = {
    pageTitle: null,
    siteTitle: "Your Site Name Here",
};

export default Title;

Basta colocar o componente na página e definir pageTitle:

<Title pageTitle="Dashboard" />
<Title pageTitle={item.name} />

— Coronel Trinta e Dois
fonte

Uau, parece tão promissor, React Helmet e document.title funcionam, mas isso é incrível :) Obrigado

— mamsoudi

Adorei essa solução até perceber que ela apenas acrescenta fullTitleao conteúdo já encontrado em index.html's <title>Default Title</title>.

— JWess

Apenas remova o título padrão de seu módulo (não constructor!) `` `Import React de 'react'; importar PropTypes de 'prop-types'; importar ReactDOM de 'react-dom'; const titleNode = document.getElementsByTagName ("title") [0]; titleNode.innerText = ''; exportar a classe padrão Title extends React.PureComponent {static propTypes = {children: PropTypes.node,}; construtor (adereços) {super (adereços); this.el = titleNode; } render () {return ReactDOM.createPortal (this.props.children, this.el,); }} `` `

— Anatoliy Litinskiy

8

No React 16.13, você pode configurá-lo diretamente na função de renderização:

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
    render() {
        document.title = 'wow'
        return <p>Hello</p>
    }
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
)

Para componente de função:

function App() {
    document.title = 'wow'
    return <p>Hello</p>
}

— M Imam Pratama
fonte

1

Este é um erro típico que aparece em muitas bases de código reac: NÃO FAÇA ISSO! Todos os métodos de renderização devem ser funções puras (sem efeitos colaterais), se você precisar realizar um efeito colateral: useEffect para componentes funcionais ou eventos de componentes em classes (mais informações: reddit.com/r/reactjs/comments/8avfej/… )

— Elias Platek

6

Simplesmente você pode criar uma função em um arquivo js e exportá-la para uso em componentes

como abaixo:

export default function setTitle(title) {
  if (typeof title !== "string") {
     throw new Error("Title should be an string");
  }
  document.title = title;
}

e usá-lo em qualquer componente como este:

import React, { Component } from 'react';
import setTitle from './setTitle.js' // no need to js extension at the end

class App extends Component {
  componentDidMount() {
    setTitle("i am a new title");
  }

  render() {
    return (
      <div>
        see the title
      </div>
    );
  }
}

export default App

— amin msh
fonte

2

Você pode usar o seguinte abaixo com document.title = 'Home Page'

import React from 'react'
import { Component } from 'react-dom'


class App extends Component{
  componentDidMount(){
    document.title = "Home Page"
  }

  render(){
    return(
      <p> Title is now equal to Home Page </p>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

ou você pode usar este pacote npm npm i react-document-title

import React from 'react'
import { Component } from 'react-dom'
import DocumentTitle from 'react-document-title';


class App extends Component{


  render(){
    return(
      <DocumentTitle title='Home'>
        <h1>Home, sweet home.</h1>
      </DocumentTitle>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

Happy Coding !!!

— EsterlingAccime Youtuber
fonte

2

Não testei muito bem, mas parece funcionar. Escrito em TypeScript.

interface Props {
    children: string|number|Array<string|number>,
}

export default class DocumentTitle extends React.Component<Props> {

    private oldTitle: string = document.title;

    componentWillUnmount(): void {
        document.title = this.oldTitle;
    }

    render() {
        document.title = Array.isArray(this.props.children) ? this.props.children.join('') : this.props.children;
        return null;
    }
}

Uso:

export default class App extends React.Component<Props, State> {

    render() {
        return <>
            <DocumentTitle>{this.state.files.length} Gallery</DocumentTitle>
            <Container>
                Lorem ipsum
            </Container>
        </>
    }
}

Não sei por que os outros estão interessados em colocar seu aplicativo inteiro dentro de seu <Title>componente, isso parece estranho para mim.

Ao atualizar o document.titleinterior, render()ele atualizará / permanecerá atualizado se você quiser um título dinâmico. Deve reverter o título quando desmontado também. Portais são bonitos, mas parecem desnecessários; realmente não precisamos manipular nenhum nó DOM aqui.

— mpen
fonte

2

Você pode usar ReactDOM e alterar a <title>tag

ReactDOM.render(
   "New Title",
   document.getElementsByTagName("title")[0]
);

— Reza Moradi
fonte

0

Eu uso esse método, que descobri porque é mais fácil para mim. Eu o uso em combinação com o componente de função. Só faça isso se você não se importar que ele não exiba nenhum título se o usuário desabilitar o Javascript em sua página.

Existem duas coisas que você precisa fazer.

1. Vá para seu index.html e exclua esta linha aqui

<title>React App</title>

2. Vá para a função mainapp e retorne isso, que é apenas uma estrutura html normal, você pode copiar e colar o conteúdo principal do seu site entre as tags do corpo:

return (
        <html>
          <head>
            <title>hi</title>
          </head>
          <body></body>
        </html>
      );

Você pode substituir o título como desejar.

— Makusium
fonte

-7

Se você é um iniciante, você pode apenas se salvar de tudo isso indo para a pasta pública de sua pasta do projeto react e editar o título em "index.html" e colocar o seu. Não se esqueça de salvar para que reflita.

— Stanleynd
fonte