【React】ログイン・ログアウト後にリダイレクトを設定する方法

2022年12月13日React

Reactでリダイレクトを設定する方法を紹介します。
以下の例ではログイン・ログアウト後にリダイレクトさせています。

Reactでログイン・ログアウト後にリダイレクトを設定する方法

手順1:react-router-domをインストール

#npmの場合
npm i react-router-dom

#yarnの場合
yarn add react-router-dom

ルーティングの設定をシンプルにすることができるreact-router-domをインストールします。
このreact-router-domのuseNavigate()を使用します。

手順2:useNavigateをインポート

import { useNavigate } from "react-router-dom";

手順3:JSXで記述(ログアウト)

import { signOut } from "firebase/auth";
  import React from "react";
  import { useNavigate } from "react-router-dom";
  import { auth } from "../firebase";

  const Logout = ({ setIsAuth }) => {
    const navigate = useNavigate();
    const logout = () => {
      // ログアウト
      signOut(auth).then(() => {
        // ここにisAuthを削除する関数を実行
        // たとえばローカルストレージに保持している場合
        localStorage.clear();
        setIsAuth(false); //状態を変更
      });
      // ログインにとばす
      navigate("/login");
    };
    return (
      <div>
        <p>ログアウトする</p>
        <button onClick={logout}>ログアウト</button>
      </div>
    );
  };

  export default Logout;

useNavigate()はを実行したものを変数に格納します。
navigateという変数であれば、navigateに引数を渡します。
その文字列が遷移先のページとなります。

手順3:JSXで記述(ログイン)

import { signInWithPopup } from "firebase/auth";
  import React from "react";
  import { useNavigate } from "react-router-dom";
  import { auth, provider } from "../firebase";

  const Login = ({ setIsAuth }) => {
    // ログインしたらホームに飛ばす
    const navigate = useNavigate();
    const loginWithGoogle = () => {
      // Googleでログイン
      signInWithPopup(auth, provider).then((result) => {
        // ログインするとコンソールにresultが表示される
        // console.log(result);

        // ローカルストレージに状態を保持
        localStorage.setItem("isAuth", true);
        setIsAuth(true); //ログインしたらtrueにする

        // homeにとばす
        navigate("/");
      });
    };
    return (
      <div>
        <p>ログインして始める</p>
        <button onClick={loginWithGoogle}>Googleでログイン</button>
      </div>
    );
  };

  export default Login;

こちらもログアウトと同じです。