Apps

011-Login｜Step6_ReactでLogin機能を実装：ルーティングの設定

ログイン機能が完成したので、次に ルーティング を設定します。
ユーザーがログインしていない場合はログインページへリダイレクトし、ログイン済みの場合のみ特定のページにアクセスできるようにします。

実装内容

  1. react-router-dom を使ったルーティングの設定
  2. Navigate を利用したログイン制御
  3. 未ログイン時のリダイレクト設定

1. react-router-dom を使ったルーティングの設定

まず、react-router-dom を使用してページ遷移を実装します。
ルーティングを管理するために Router.js を作成します。

src/router/Router.js

import React, { useContext } from 'react';
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import Login from '../components/pages/Login';
import Home from '../components/pages/Home';
import { LoginUserContext } from '../components/providers/LoginUserProvider';

const Router = () => {
  const { isLogined } = useContext(LoginUserContext);

  return (
    <BrowserRouter>
      <Routes>
        <Route path="/login" element={<Login />} />
        <Route path="/" element={isLogined ? <Home /> : <Navigate to="/login" />} />
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

解説

  • BrowserRouter を使用してルーティングを管理。
  • Route で "/login" に Login コンポーネント、"/" に Home コンポーネントを設定。
  • isLogined が true なら Home へ遷移、false なら Navigate を使って "/login" にリダイレクト。

2. Navigate を利用したログイン制御

ユーザーがログインしていない場合、Home にアクセスできないようにします。

src/components/pages/Home.js

import React, { useContext } from 'react';
import { LoginUserContext } from '../providers/LoginUserProvider';
import { Navigate } from 'react-router-dom';
import Header from '../templates/Header';

const Home = () => {
  const { isLogined, loginUser } = useContext(LoginUserContext);

  if (!isLogined) {
    return <Navigate to="/login" />;
  }

  return (
    <div>
      <Header />
      <h1>ホーム画面</h1>
      <p>ログインユーザー: {loginUser}</p>
    </div>
  );
};

export default Home;

解説

  • useContext(LoginUserContext) でログイン状態を取得。
  • isLogined が false の場合、Navigate を使って "/login" にリダイレクト。
  • isLogined が true の場合のみ Home を表示。

3. 未ログイン時のリダイレクト設定

ログインページで、ログイン済みのユーザーがアクセスした場合は Home にリダイレクトするようにします。

src/components/pages/Login.js

import React, { useState, useContext } from 'react';
import { useNavigate, Navigate } from 'react-router-dom';
import { LoginUserContext } from '../providers/LoginUserProvider';

const Login = () => {
  const { isLogined, setLoginUser, setIsLogined } = useContext(LoginUserContext);
  const [username, setUsername] = useState('');
  const navigate = useNavigate();

  if (isLogined) {
    return <Navigate to="/" />;
  }

  const handleLogin = () => {
    if (username) {
      setLoginUser(username);
      setIsLogined(true);
      navigate('/');
    }
  };

  return (
    <div>
      <h1>ログイン画面</h1>
      <input
        type="text"
        placeholder="ユーザー名"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <button onClick={handleLogin}>ログイン</button>
    </div>
  );
};

export default Login;

解説

  • isLogined が true の場合、Navigate を使って Home にリダイレクト。
  • ユーザーが username を入力して handleLogin を実行すると、ログイン情報を Context に保存し Home へ遷移。

まとめ

  • Router.js でルーティングを設定。
  • Navigate を利用してログインしていないユーザーを "/login" にリダイレクト。
  • 既にログイン済みのユーザーが "/login" にアクセスした場合は "/" にリダイレクト。

これでルーティングの設定が完了しました！ 🎉

-Apps