この記事の概要
React 19 にて、retunの中でheadにまつわるタグを指定すればちゃんと適用されます。
例えばtitle要素。
ページごとにtitleを変えたいとき、これまでは react-helmet-async などを使っていたと思いますが、不要になりそうですね。
ドキュメントに書いてあること以外でも注意した方が良さそうな箇所を見つけたので記事にしました。
html ファイル内に title がある場合の挙動
以下のような HTML があったとします。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
そして、このようなページを作ったとします。
export function Home() {
const title = "Home";
return (
<div>
<title>{`${title} | React 19 head element test`}</title>
<div className="page">
<h1>{title}</h1>
<p>This is home page</p>
</div>
</div>
);
}
この場合、最終的に出力されるtitleは次のようになります。
<title>Home | React 19 head element test</title>
<title>Vite + React + TS</title>
ファイル内にあるtitleをhead内に配置するだけで、もともとあったものを置き換えはしないということです。
注意書きには「複数のコンポーネントからtitleをレンダリングしないでください」とありますが、コンポーネントに限らず 1 つにまとめるような機能は無いようです。
ページごとにtitleを設定するつもりの場合、HTML にあるtitleは消しておく必要がありそうです。
おまけ：ドキュメントにも書いてあるけどついでに説明
上の例では実施しているのですが{変数} 文字列の書式でtitleを指定しようとすると上手く反映されません。
{`${変数} 文字列`}の書式にする必要があります。
過去に書いたこちらの記事で少しだけ解説しているのですが、{変数} 文字列だとテキストノードが 2 つ生まれてしまっています。
titleもあくまでコンポーネントの 1 つで、直下には 1 つの要素しか置けないようです。