Apps

011-Login｜Step4_ReactでLogin機能を実装：ログイン後の画面遷移とユーザー情報の表示

ログイン後に適切な画面へ遷移し、ユーザー情報を表示するための実装を行います。

実装内容

  1. Home.js の作成
  2. useLocation を用いたログイン情報の取得
  3. LoginUserContext を利用したログイン状態の管理

1. Home.js の作成

ログイン後に遷移する Home.js を作成し、ログインしたユーザー名を表示します。

src/components/pages/Home.js

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

const Home = () => {
  const location = useLocation();
  const [data, setData] = useState(location.state);
  const { isLogined, loginUser } = useContext(LoginUserContext);

  if (!isLogined) {
    return <Navigate to="/login" />;
  } else {
    return (
      <>
        <Header />
        <h2>Home</h2>
        <p>ログインユーザー: {loginUser}</p>
      </>
    );
  }
};

export default Home;

2. useLocation を用いたログイン情報の取得

useLocation を使って、ログイン時に state として渡された情報を取得できます。

const location = useLocation();
const [data, setData] = useState(location.state);

これにより、navigate("/", { state: { username: "ABC"} }) のようにログイン時に渡された state を Home.js で受け取ることができます。

3. LoginUserContext を利用したログイン状態の管理

ログイン状態をグローバルに管理するために、LoginUserContext を活用します。

src/components/providers/LoginUserProvider.js

import React, { createContext, useState } from 'react';

export const LoginUserContext = createContext({});

export const LoginUserProvider = ({ children }) => {
    const [loginUser, setLoginUser] = useState("");
    const [isLogined, setIsLogined] = useState(false);

    return (
        <LoginUserContext.Provider value={{ loginUser, setLoginUser, isLogined, setIsLogined }}>
            {children}
        </LoginUserContext.Provider>
    );
};

Home.js では useContext(LoginUserContext) を使ってログイン状態を取得し、未ログインなら /login へリダイレクトします。

まとめ

  • Home.js でログイン後の画面を作成し、ユーザー名を表示。
  • useLocation を使ってログイン時の情報を取得。
  • LoginUserContext を利用してログイン状態をグローバルに管理。

これで、ログイン後の画面遷移とユーザー情報の表示ができるようになりました！ 🎉

-Apps