React.js에서 메타 태그를 업데이트하는 방법은 무엇입니까?

Question

react.js의 단일 페이지 응용 프로그램에서 작업 중이므로 페이지 전환이나 브라우저 앞뒤로 메타 태그를 업데이트하는 가장 좋은 방법은 무엇입니까?

Answer 1

이전 프로젝트에서 react-document-meta을 사용했습니다.

그냥 메타 값

const meta = { 
    title: 'Some Meta Title', 
    description: 'I am a description, and I can create multiple tags', 
    canonical: 'http://example.com/path/to/page', 
    meta: { 
     charset: 'utf-8', 
     name: { 
      keywords: 'react,meta,document,html,tags' 
     } 
    } 

을 정의하고 반환

Answer 2

당신은 react-meta-tags를 사용할 수있는

<DocumentMeta {...meta} /> 

놓습니다. 그것은 당신이 선언적 방법과 정상적인 jsx 형식으로 제목과 다른 메타 태그를 쓸 수있게 해줍니다. 이것은 머리로 이동합니다 (문서의 서버 사용량 확인).

고급 사용 사례가있는 경우 react-helment을 확인하는 것이 좋습니다.

Answer 3

다음과 같은 방법으로 페이지 제목 및 메타 태그 설명을 제공 할 수도 있습니다.

이와 같이 index.html 파일에 설명의 메타 태그를 추가하십시오. 당신의 .js 파일이나 렌더링() 메소드 아래 .jsx 파일

<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<meta name="description" content=""> 
<title>Dynamic Page title here</title> 

이 같은 페이지의 페이지 제목 및 메타 설명을 작성합니다.

render() 
{ 
document.title ="Welcome | here is your page title to display"; 
document.getElementsByTagName("META")[2].content="Your description about the page or site here to set dynamically"; 

return(
    <div>Page content</div> 
); 
}