ReactでHTMLヘッダを変更する

概要

react-helmetを利用する。
どこからでもHTMLヘッダを変更できる。

使い方

導入

yarn add react-helmet @types/react-helmet

タイトルの変更

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

const title = 'Help';

const Help = () => (
  <>
    <Helmet>
      <title>{title}</title>
    </Helmet>

    <h1>{title}</h1>
    <p>
      This is Help page ... 
    </p>
  </>
);

export default Help;

まとめ

簡単に変更できる。
SPAとかで、ページによってタイトルを変更したいときに便利。
他にも変更できるので、以下を確認する。
https://github.com/nfl/react-helmet