React.jsのページ遷移の基本

ページ遷移の際には、react-router-domを使います。Node.jsでインストールして、React.jsのプロジェクトでimportして使います。

React.jsを解説しているサイトでは、ルーティングと呼びます。

今回作るプログラムの例

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

ルーティングの準備

React.jsでページ遷移の機能を使うにはreact-router-domをインストールするのが一般的です。

react-router-domをインストールする

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

npm install react-router-dom

メインの.jsだけで書く場合

では、ここからは実際にページ遷移のあるReact.jsのプロジェクトを作っていきます。

まず最初に、メインのプログラムファイルになるindex.jsに各ページのコンテンツを書く方法を見ていきます。

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

/src/index.js

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

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 (
		<div>
			<p>ページ1</p>
			<button onClick={() => navigate('/page2')}>ページ2に進む</button>
		</div>
	);
}

// 2ページ目の内容
const Page2 = () => {
	const navigate = useNavigate();
	return (
		<div>
			<p>ページ2</p>
			<button onClick={() => navigate('/page3')}>ページ3に進む</button>
		</div>
	);
}

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

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

ページ毎にコンポーネントを分ける場合

React.jsでは、基本的にはコンポーネントを部品としてファイルを分けながら開発していくので、ページ毎にコンポーネントを分ける方法のほうが現実的です。

コンポーネントファイルの分け方の例

それぞれのファイルに書くプログラム

/src/index.js

import React from "react";
import ReactDOM from "react-dom";
import Routers from './Routers';

const App = () => {
	return (
		<div>
			<Routers />
		</div>
	);
}

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

/src/Routers.jsx

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Page1 from "./Page1";
import Page2 from "./Page2";
import Page3 from "./Page3";

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

/src/Page1.jsx

import { useNavigate } from "react-router-dom";

const Page1 = () => {
	const navigate = useNavigate();
	return (
		<div>
			<p>ページ1</p>
			<button onClick={() => navigate('/page2')}>ページ2に進む</button>
		</div>
	);
}
export default Page1;

/src/Page2.jsx

import { useNavigate } from "react-router-dom";

const Page2 = () => {
	const navigate = useNavigate();
	return (
		<div>
			<p>ページ2</p>
			<button onClick={() => navigate('/page3')}>ページ3に進む</button>
		</div>
	);
}
export default Page2;

/src/Page3.jsx

import { useNavigate } from "react-router-dom";

const Page3 = () => {
	const navigate = useNavigate();
	return (
		<div>
			<p>ページ3</p>
			<button onClick={() => navigate('/')}>ページ1に戻る</button>
		</div>
	);
}
export default Page3;