Apps

012-Login+Graph｜Step2_フロントエンド：ページ構成とルーティング設定

はじめに

ログイン機能を実装するにあたり、適切な ページ構成とルーティングの設定 が重要になります。
本記事では、React Router を活用して ログイン画面やダッシュボード などのページ遷移を管理する方法を解説します。

1. フロントエンド：ページの構成確認とルーティングの設定

📂 ディレクトリ構成

まず、以下のディレクトリを作成し、ページファイルを整理します。

cd src
mkdir components
cd components
mkdir pages
cd pages
echo. > Home.js
echo. > Login.js
echo. > LoginFailed.js
echo. > NotFound.js
echo. > Register.js

components/pages/ フォルダの中に、アプリ内で使用する各ページを作成します。

2. 各ページコンポーネントの作成

次に、各ページのファイルに デフォルトエクスポートのひな形 を作成します。

以下のコマンドを 各ファイルで実行 してください。

rafce

または、手動で以下のコードを記述します。

Home.js（他のページも同様に作成）

import React from 'react'

const Home = () => {
  return (
    <div>Home</div>
  )
}

export default Home

この方法で、Login.js、LoginFailed.js、NotFound.js、Register.js も同様に作成してください。

3. React Routerの設定

React Routerを使用するために、react-router-dom をインストール します。

npm install react-router-dom

4. index.js で BrowserRouter を設定

アプリ全体でルーティングを管理できるように、index.js を編集します。

src/index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

reportWebVitals();

<BrowserRouter> で <App /> をラップすることで、アプリ全体でルーティングが機能します。

5. App.js でルーティングを定義

アプリ内の各ページへのルート（URL）を設定します。

src/App.js

import './App.css';
import { Routes, Route } from "react-router-dom";
import Home from './components/pages/Home';
import Login from './components/pages/Login';
import LoginFailed from './components/pages/LoginFailed';
import NotFound from './components/pages/NotFound';
import Register from './components/pages/Register';

function App() {
  return (
    <div className='App'>
      <Routes>
        <Route path='/' element={<Home />} />
        <Route path='/login' element={<Login />} />
        <Route path='/loginfailed' element={<LoginFailed />} />
        <Route path='/notfound' element={<NotFound />} />
        <Route path='/register' element={<Register />} />
      </Routes>
    </div>
  );
}

export default App;

<Routes> の中に <Route> を設定することで、指定されたパス (path) に応じてページが切り替わります。

6. 開発サーバーを起動して動作確認

セットアップが完了したら、開発サーバーを起動してルーティングが正しく機能するか確認します。

npm start

ブラウザで以下のURLにアクセスし、それぞれのページが表示されるか確認してください。

URL表示されるページ
http://localhost:3000/Home
http://localhost:3000/loginLogin
http://localhost:3000/loginfailedLoginFailed
http://localhost:3000/notfoundNotFound
http://localhost:3000/registerRegister

まとめ

本記事では、React Routerを使用して ページ構成とルーティングの設定 を行いました。

  1. ディレクトリ構成を整理（components/pages を作成）
  2. 各ページコンポーネントを作成（rafce コマンドで雛形作成）
  3. React Routerをインストール
  4. index.js で <BrowserRouter> を設定
  5. App.js で <Routes> と <Route> を定義
  6. 開発サーバーを起動し、ページ遷移を確認

-Apps