【React】Reactで画面遷移させる方法
Reactで画面遷移を実装していきます。
Reactとは、Facebookが開発したオープンソースのJavaScriptライブラリです。SPA(シングルページアプリケーション)を作成する時に使用されます。
Reactプロジェクトの作成
Node.jsがインストールされているかを確認
node -v
npm -v
Reactプロジェクトを作成するコマンドを実行
npx create-react-app my-app
create-react-appは現在メンテナンスが終了しており、React公式もVite(npm create vite@latest)など別のツールへの移行を推奨しています。新規にプロジェクトを始める場合はViteの利用を検討してください。本記事では既存の解説に合わせてcreate-react-appのまま進めます。
プロジェクトディレクトリに移動
cd my-app
プロジェクトを起動
npm start
ブラウザでhttp://localhost:3000にアクセスすると、Reactアプリが表示される
初期のディレクトリ構造
「npx create-react-app my-app」コマンドで作成した場合、このようなディレクトリ構造になっているかと思います。
my-app/
├── node_modules/ # インストールされたパッケージ
├── public/ # 公開用の静的ファイル
│ ├── favicon.ico # ファビコン
│ ├── index.html # アプリのエントリーポイント
│ ├── logo192.png # ロゴ画像（192x192）
│ ├── logo512.png # ロゴ画像（512x512）
│ ├── manifest.json # ウェブアプリの設定
│ └── robots.txt # 検索エンジン向けの設定
├── src/ # アプリのソースコード
│ ├── App.css # Appコンポーネント用のCSS
│ ├── App.js # メインのアプリコンポーネント
│ ├── App.test.js # Appコンポーネントのテスト
│ ├── index.css # 全体のスタイル
│ ├── index.js # アプリのエントリーポイント
│ └── reportWebVitals.js # パフォーマンス測定用のファイル
├── .gitignore # Gitに含めないファイルの設定
├── package.json # プロジェクトのメタデータと依存関係
├── README.md # プロジェクトの説明
└── yarn.lock / package-lock.json # 依存関係のロックファイル
react-router-domのインストール
Reactで画面遷移させるには、react-router-domが必要になるのでインストール
npm install react-router-dom
ページを作成する
srcディレクトリの中にpagesディレクトリを作成し、その中にページのファイルを作成していきます。
├── src/ # アプリのソースコード
│ ├── pages
├── ここにページのファイルを作成していく
ページのファイルの中身
今回はpage1.js、page2.js、page3.jsの3つのファイルを作成します。
画面遷移したことが見た目でわかりやすいように、下記のコードをコピーしたうえで、コンポーネント名と<h1>の中身の数字をpage2、page3にそれぞれ書き換えて保存してください。
const Page1 = () => {
return (
<>
<h1>page1</h1>
</>
)
}
export default Page1
作成した後は、こういうディレクトリ構造になっています。
├── src/ # アプリのソースコード
│ ├── pages
├── page1.js
├── page2.js
├── page3.js
App.jsの中身を変更
App.jsファイルの中身のdivタグの中身とcssの記述を削除します。
function App() {
return (
<div>
</div>
);
}
export default App;
画面遷移させるために先ほどインストールしたreact-router-domの中のRouter, Routes, Route, Linkが必要なのでimportする。
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
function App() {
return (
<div>
</div>
);
}
export default App;
さらにルーティングを設定します。
先ほど作成したpage1.js、page2.js、page3.jsをimportし、このように記述します。
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import Page1 from './pages/page1'
import Page2 from './pages/page2'
import Page3 from './pages/page3'
function App() {
return (
<div>
<Router>
{/* ルーティングの設定 */}
<Routes>
<Route path="/page1" element={<Page1 />} />
<Route path="/page2" element={<Page2 />} />
<Route path="/page3" element={<Page3 />} />
</Routes>
</Router>
</div>
);
}
export default App;
画面遷移がしやすいようにナビゲーションメニューを追加する。
import { BrowserRouter as Router, Routes, Route, Link, Navigate } from 'react-router-dom';
import Page1 from './pages/page1'
import Page2 from './pages/page2'
import Page3 from './pages/page3'
function App() {
return (
<div>
<Router>
{/* ナビゲーションメニュー */}
<nav>
<ul>
<li>
<Link to="/page1">Page1</Link>
</li>
<li>
<Link to="/page2">Page2</Link>
</li>
<li>
<Link to="/page3">Page3</Link>
</li>
</ul>
</nav>
{/* ルーティングの設定 */}
<Routes>
<Route path="/" element={<Navigate to="/page1" replace />} />
<Route path="/page1" element={<Page1 />} />
<Route path="/page2" element={<Page2 />} />
<Route path="/page3" element={<Page3 />} />
</Routes>
</Router>
</div>
);
}
export default App;
path="/"に対するルートを用意していないと、起動直後のhttp://localhost:3000が真っ白なページになってしまいます。ここではNavigateコンポーネントで/page1にリダイレクトするようにしています。
ブラウザで動作確認
ブラウザで開くと、クリックで画面遷移できていることを確認できます。
まとめ
- 画面遷移には
react-router-domのBrowserRouter/Routes/Route/Linkを使う - ページ用コンポーネントは
src/pagesにまとめておくと見通しがよい path="/"に対するルートを用意し忘れると、起動直後のトップページが真っ白になるので注意create-react-appは現在非推奨のため、新規プロジェクトではViteなど別の選択肢も検討する
react-router-domの基本的な使い方さえ押さえれば、React製のSPAで画面遷移を作るのはそれほど難しくありません。まずは今回のようにシンプルな構成で動かしてみて、慣れてきたらネストしたルートや動的なパスパラメータにも挑戦してみてください。
