React Routerでルーティングを実装しよう！【基本】

Reactでは、ページ遷移をしているように見せる「シングルページアプリケーション（SPA）」が主流です。
その中で、「URLに応じて画面（コンポーネント）を切り替える」ためのライブラリが React Router です。

この記事では、React Router v6 を使った基本的なルーティングの実装手順を、初心者にもわかりやすく丁寧に解説します。

【1】ページコンポーネントの作成

pagesフォルダを作成して、その中にHome.jsxとAbout.jsxファイルを作成します。

ページごとにコンポーネントを作成し、それぞれがRouteで表示されるようにします。

pages/Home.jsx

import React from 'react';

function Home() {
  return <h1>ホームページへようこそ！</h1>;
}

export default Home;

pages/About.jsx

import React from 'react';

function About() {
  return <h1>このサイトについて</h1>;
}

export default About;

pages/NotFound.jsx

import React from 'react';

function NotFound() {
  return <h1>404 - ページが見つかりません</h1>;
}

export default NotFound;

ディレクトリ構成

src/
├── App.jsx
├── main.jsx
├── pages/
│   ├── Home.jsx
│   ├── About.jsx
│   └── NotFound.jsx

【2】react-router-domのインストール

ルーティング機能をReactで使うために、react-router-domというライブラリをインストールします。

このライブラリがあると、URLによって異なるページを簡単に切り替えられます。

ターミナル

npm install react-router-dom

react-router-dom はブラウザ版のReact Routerです。

【3】セットアップ・ルーティング定義

【3-1】セットアップ（main.jsx）

Reactアプリの「最上位のコンポーネント」を、<BrowserRouter> で囲む必要があります。

main.jsx

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'

// react-router
import { BrowserRouter } from 'react-router-dom'

import './index.css'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </StrictMode>
)

【3-2】ルーティング定義（App.jsx）

<Routes> の中に <Route> を定義することで、URLごとの表示を切り替えます。
path="*" は、「定義されていないすべてのパス」にマッチし、404表示に使います。

App.jsx

import React from 'react'

// react-router （追加）
import { Routes, Route } from 'react-router-dom';

// pages （追加）
import Home from './pages/Home'
import About from './pages/About'
import NotFound from './pages/NotFound'

const App = () => {
  return (
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
  )
}

export default App

【4】ナビゲーションを作成

【4-1】レイアウトコンポーネントを作成（Header.jsx）

layoutsフォルダを作成して、その中にHeader.jsxファイルを作成し、
React RouterのLinkを使用したナビゲーションを実装します。

layouts/Header.jsx

// react-router （追加）
import { Link } from 'react-router-dom';

function Header() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
    </nav>
  );
}

【4-2】HeaderコンポーネントをApp.jsxに組み込む

App.jsx

import React from 'react'

// react-router 
import { Routes, Route } from 'react-router-dom';

// pages 
import Home from './pages/Home'
import About from './pages/About'

// layouts （追加）
import Header from './layouts/Header';

function App() {
  return (
    <Router>
      <Header />  {/* 追加 */}
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

export default App;

ディレクトリ構成

my-app/
├── src/
│   ├── App.jsx
│   ├── main.jsx
│   ├── layouts/
│   │   └── Header.jsx
│   ├── pages/
│   │   ├── Home.jsx
│   │   ├── About.jsx
│   │   └── NotFound.jsx

まとめ

React Router を使えば、React アプリ内でページ遷移のような動作をスムーズに実現できます。

シンプルなポートフォリオサイトから本格的なWebアプリケーションまで、React Routerを使えばルート設計が簡単になります。 ぜひ一歩ずつ構築してみましょう！