head要素の操作の基本

React.jsでhead要素の中を変更する際は、react-helmetというライブラリを使います。遷移したページ別にhead要素の中身を動的に変更できます。

今回作るプログラムの例

こちらの例で、ページ遷移のやり方を見ていきます。

head要素を操作する準備

react-helmetをインストールする

ターミナルから下記のコマンドを実行します。

npm install react-helmet

ページ別にhead要素の中身を変更する例

では、ページ遷移のあるプロジェクトでreact-helmetの使い方を掴んでもらいます。解説が複雑にならないように、今回は複数のページのコンテンツを/src/index.jsの中にまとめて記述しています。

ファイルに書くプログラム

/src/index.js

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Routes, Route, useNavigate } from "react-router-dom";
import Helmet from "react-helmet";

const App = () => {
	return (
		<BrowserRouter>
			<Routes>
				<Route path="/" element={<Page1/>}/>
				<Route path="/page2/" element={<Page2/>}/>
				<Route path="/page3/" element={<Page3/>}/>
			</Routes>
		</BrowserRouter>
	);
}

// 1ページ目の内容
const Page1 = () => {
	const navigate = useNavigate();
	return (
		<>
			<Helmet>
				<title>ページ1</title>
			</Helmet>
			<div>
				<p>ページ1</p>
				<button onClick={() => navigate('/page2')}>ページ2に進む</button>
			</div>
		</>
	);
}

// 2ページ目の内容
const Page2 = () => {
	const navigate = useNavigate();
	return (
		<>
			<Helmet>
				<title>ページ2</title>
				<meta name="robots" content="noindex,nofollow" />
			</Helmet>
			<div>
				<p>ページ2</p>
				<button onClick={() => navigate('/page3')}>ページ3に進む</button>
			</div>
		</>
	);
}

// 3ページ目の内容
const Page3 = () => {
	const navigate = useNavigate();
	return (
		<>
			<Helmet>
				<title>ページ3</title>
			</Helmet>
			<div>
				<p>ページ3</p>
				<button onClick={() => navigate('/')}>ページ1に戻る</button>
			</div>
		</>
	);
}

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