React에서 문서 제목을 어떻게 설정합니까?

107

내 React 애플리케이션의 문서 제목 (브라우저 제목 표시 줄)을 설정하고 싶습니다. 나는 사용하여 시도했다 반응 - 문서 제목 (구식 인 것 같다) 및 설정을 document.title에 constructor그리고 componentDidMount()이러한 솔루션 작업 없음 -.

javascript  reactjs  dom 
— 엘리
소스
오래 되었나요? @DanAbramov 나는 react-document-title이 React16에서도 잘 작동한다고 생각합니다.
— JS dev
16.5 반응과 I의 확인, 반응-문서 제목은 잘 작동
— 조 - 이동

답변:

81

React Helmet을 사용할 수 있습니다 .

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>
        ...
      </>
    )
  }
}
— 인용구 Bro
소스
이것은 첫 번째 초에 index.html의 내용을 '플래시'합니다.
— nxmohamad
3
이것은 확실히 최고의 대답이어야합니다. 제목 및 기타 메타 속성을 관리하는 훌륭한 선언적 방법입니다
— Ryall
113 
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')
);

이것은 나를 위해 작동합니다.

편집 : webpack-dev-server를 사용하는 경우 인라인을 true로 설정하십시오.

— AlexVestin
소스
4
이것은 작동하지만 페이지가로드되는 동안 문서 제목은 여전히 ​​"React App"입니다.이 문제를 해결하는 방법이 있습니까?
— 일라이
7
index.html에서 제목 태그의 콘텐츠 변경
— AlexVestin 2018
4
더 나은 선언적 quotesBro의 대답 @처럼 그것을 할 수
— Ryall
1
이 방법이 SEO에 적합합니까?
— Davidm176
아니 좋은 아이디어 @AlexVestin 당신은 당신의 반작용 응용 프로그램에서 다른보기 다른 제목을 필요로하는 경우
— 케빈
51

React 16.8의 경우 useEffect를 사용하여 기능적 구성 요소로이를 수행 할 수 있습니다. .

예를 들면 : 

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

두 번째 인수를 배열로 사용하면 useEffect를 한 번만 호출하여 componentDidMount.

— 조던 다니엘스
소스
농담과 효소로 이것을 어떻게 테스트 할 수 있습니까?
— nickstaroba
16

다른 사람들이 언급했듯이 document.title = 'My new title'및 React Helmet 을 사용하여 페이지 제목을 업데이트 할 수 있습니다 . 이 두 솔루션 모두 스크립트가로드되기 전에 초기 'React App'제목을 렌더링합니다.

초기 문서 제목을 사용 create-react-app하는 경우 태그 파일에 설정되어 있습니다.<title>/public/index.html

직접 편집하거나 환경 변수로 채워지는 자리 표시자를 사용할 수 있습니다.

/.env:

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

어떤 이유로 개발 환경에서 다른 타이틀을 원했다면-

/.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>

이 접근 방식은 또한 전역 process.env개체를 사용하여 내 응용 프로그램에서 사이트 제목 환경 변수를 읽을 수 있음을 의미합니다 .

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

참조 : 사용자 지정 환경 변수 추가

— Gruffy
소스
.env 파일을 package.json 파일과 동일한 수준에 배치해야합니다. :)
— Ian Smith
10

'componentWillMount'의 라이프 사이클에서 문서 제목을 설정해야합니다.

componentWillMount() {
    document.title = 'your title name'
  },
— 앨빈
소스
7
componentWillMount는 () 버전 16 반응 최신에서 더 이상 사용되지 않습니다
— Hemadri Dasari
3
이 경우 대부분의 경우와 같이 더 이상 사용되지 않는 componentWillMount를 제거해야 할 때 componentDidMount
— Jo-Go로
9

React Portal<title> 을 사용하면 실제 React 노드 인 것처럼 루트 React 노드 외부의 요소 (예 :)에 렌더링 할 수 있습니다 . 이제 추가 종속성없이 깔끔하게 제목을 설정할 수 있습니다.

예를 들면 다음과 같습니다.

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;

페이지에 구성 요소를 넣고 다음을 설정하십시오 pageTitle.

<Title pageTitle="Dashboard" />
<Title pageTitle={item.name} />
— 서른 투 대령
소스
와우, 매우 유망 해 보이지만 React Helmet과 document.title이 모두 작동하지만 이것은 굉장합니다. :) 감사합니다
— mamsoudi
이 솔루션 fullTitle은 index.html에서 이미 찾은 콘텐츠 에만 추가된다는 사실을 깨닫기 전까지는이 솔루션을 좋아했습니다 <title>Default Title</title>.
— JWess
모듈에서 기본 제목을 제거하기 만하면됩니다 ( constructor!).```import React from 'react'; 'prop-types'에서 PropTypes 가져 오기; 'react-dom'에서 ReactDOM 가져 오기; const titleNode = document.getElementsByTagName ( "title") [0]; titleNode.innerText = ''; 기본 클래스 내보내기 Title extends React.PureComponent {static propTypes = {children : PropTypes.node,}; constructor (props) {super (props); this.el = titleNode; } render () {return ReactDOM.createPortal (this.props.children, this.el,); }}```
— Anatoliy Litinskiy
9

React 16.13에서는 render 함수 내에서 직접 설정할 수 있습니다.

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')
)

기능 구성 요소 :

function App() {
    document.title = 'wow'
    return <p>Hello</p>
}
— M 이맘 프라 타마
소스
1
이것은 많은 반응 코드베이스에 나타나는 일반적인 오류입니다. DO N'T DO That! 부작용을 수행해야하는 경우 모든 렌더링 메서드는 순수 함수 (부작용 없음) 여야합니다. 함수 구성 요소에 대한 useEffect 또는 클래스의 구성 요소 이벤트 (추가 정보 : reddit.com/r/reactjs/comments/8avfej/… )
— Elias Platek
6

간단히 js 파일에 함수를 만들고 구성 요소에서 사용할 수 있도록 내보낼 수 있습니다.

아래와 같이 : 

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

다음과 같은 구성 요소에서 사용하십시오.

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
— 아민 msh
소스
3

아래에서 다음을 사용할 수 있습니다. 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')
);

또는이 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')
);

행복한 코딩 !!!

— EsterlingAccime Youtuber
소스
2

나는 이것을 너무 철저히 테스트하지 않았지만 이것은 작동하는 것 같습니다. 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;
    }
}

용법:

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

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

확실하지 다른 사람들이 전체 응용 프로그램을 퍼팅에 촉각을 곤두 세우고있다 이유는 내부에 자신의 <Title>구성 요소, 그것은 나에게 이상한 것 같다.

document.title내부 를 업데이트하면 render()동적 제목을 원하는 경우 새로 고침 / 최신 상태로 유지됩니다. 마운트 해제시에도 제목이 되돌아갑니다. 포털은 귀엽지 만 불필요 해 보입니다. 여기서 DOM 노드를 조작 할 필요가 없습니다.

— mpen
소스
2

ReactDOM 및 <title>태그 변경을 사용할 수 있습니다.

ReactDOM.render(
   "New Title",
   document.getElementsByTagName("title")[0]
);
— 레자 모 라디
소스
0

나는이 방법을 사용하는데, 나에게 더 쉽기 때문에 알아 냈다. 기능 구성 요소와 함께 사용합니다. 사용자가 페이지에서 자바 스크립트를 비활성화 한 경우 제목이 표시되지 않도록 신경 쓰지 않는 경우에만 이렇게하십시오.

해야 할 일이 두 가지 있습니다.

1. index.html로 이동하여 여기에서이 줄을 삭제합니다.

<title>React App</title>

2. mainapp 함수로 이동하여 정상적인 html 구조 인 이것을 반환하면 웹 사이트의 주요 콘텐츠를 복사하여 body 태그 사이에 붙여 넣을 수 있습니다. 

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

원하는대로 제목을 바꿀 수 있습니다.

— 마 쿠슘
소스
-7

초보자 인 경우 react 프로젝트 폴더의 공용 폴더로 이동하여 "index.html"의 제목을 편집하고 자신의 이름을 입력하면됩니다. 반영 할 수 있도록 저장하는 것을 잊지 마십시오.

— Stanleynd
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.