React Router v6 で認証されていないユーザーをリダイレクトする方法

2024-04-11

React Router v6 でリダイレクトする方法

useNavigate フックは、プログラム的に別のページへ移動するための新しい方法です。このフックを使用するには、以下の手順に従います。

react-router-dom パッケージをインストールします。

npm install react-router-dom

必要なコンポーネントで useNavigate フックをインポートします。

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

useNavigate フックを使って、リダイレクトしたいパスを指定します。

const navigate = useNavigate();

function MyComponent() {
  // ログインしていない場合は、ログインページへリダイレクト
  if (!isLoggedIn) {
    navigate("/login");
  }

  return (
    // ...
  );
}

Navigate コンポーネントは、別のページへリダイレクトするための宣言的な方法です。このコンポーネントを使用するには、以下の手順に従います。

npm install react-router-dom

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

function MyComponent() {
  // ログインしていない場合は、ログインページへリダイレクト
  if (!isLoggedIn) {
    return <Navigate to="/login" />;
  }

  return (
    // ...
  );
}

プログラム的にリダイレクトを行う必要がある場合は、useNavigate フックを使うべきです。

useNavigate フックを使う

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

function MyComponent() {
  const navigate = useNavigate();

  // ログインボタンのクリックイベント
  function handleLoginClick() {
    // ログイン成功
    if (loginSuccess) {
      // ログイン後のページへリダイレクト
      navigate("/home");
    } else {
      // エラーメッセージを表示
      alert("ログインに失敗しました");
    }
  }

  return (
    <div>
      <button onClick={handleLoginClick}>ログイン</button>
    </div>
  );
}

Navigate コンポーネントを使う

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

function MyComponent() {
  // ログイン状態
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  // ログインボタンのクリックイベント
  function handleLoginClick() {
    // ログイン成功
    if (loginSuccess) {
      // ログイン状態を更新
      setIsLoggedIn(true);
    } else {
      // エラーメッセージを表示
      alert("ログインに失敗しました");
    }
  }

  return (
    <div>
      {isLoggedIn ? <Navigate to="/home" /> : <button onClick={handleLoginClick}>ログイン</button>}
    </div>
  );
}

これらのサンプルコードは、あくまでも参考です。実際のコードは、要件に合わせて変更する必要があります。

React Router v6 でリダイレクトを行うその他の方法

useLocation フックは、現在の URL 情報を取得することができます。このフックを使って、プログラム的に別のページへ移動することができます。

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

function MyComponent() {
  const location = useLocation();
  const navigate = useNavigate();

  // ログインしていない場合は、ログインページへリダイレクト
  if (!isLoggedIn && location.pathname !== "/login") {
    navigate("/login");
  }

  return (
    // ...
  );
}

withRouter HOCは、コンポーネントに history と location オブジェクトを props として渡します。これらのオブジェクトを使って、プログラム的に別のページへ移動することができます。

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

const MyComponent = ({ history, location }) => {
  // ログインしていない場合は、ログインページへリダイレクト
  if (!isLoggedIn && location.pathname !== "/login") {
    history.push("/login");
  }

  return (
    // ...
  );
};

export default withRouter(MyComponent);

Redirect コンポーネントは、別のページへリダイレクトするための非推奨の方法です。新しいプロジェクトでは、Navigate コンポーネントを使うべきです。

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

function MyComponent() {
  // ログインしていない場合は、ログインページへリダイレクト
  if (!isLoggedIn) {
    return <Redirect to="/login" />;
  }

  return (
    // ...
  );
}