React Router v5におけるRedirectコンポーネントの使い方

2024-04-11

ReactJSのReact-Router-Dom v5では、Redirectコンポーネントを使用して、別のURLへのリダイレクトを実装できます。

バージョン5での変更点

v5では、Redirectコンポーネントはreact-routerではなくreact-router-domパッケージに含まれています。

使い方

Redirectコンポーネントを使用するには、以下の手順が必要です。

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

npm install react-router-dom

Redirectコンポーネントをインポートします。

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

const MyComponent = () => {
  return (
    <Redirect to="/home" />
  );
};

上記のコードは、ユーザーが/my-componentにアクセスした時に/homeにリダイレクトします。

オプション

to: リダイレクト先のURLを指定します。
push: ブラウザ履歴に新しいエントリを追加するかどうかを指定します。
replace: 現在のエントリを置き換えるかどうかを指定します。

例

以下の例は、Redirectコンポーネントを使用して、ログイン認証に基づいてユーザーをリダイレクトする方法を示しています。

const App = () => {
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  const handleLogin = () => {
    setIsAuthenticated(true);
  };

  return (
    <div>
      {isAuthenticated ? (
        <Redirect to="/home" />
      ) : (
        <LoginButton onClick={handleLogin} />
      )}
    </div>
  );
};

上記のコードでは、ユーザーがログインしていない場合はログインボタンが表示され、ログインボタンをクリックすると/homeにリダイレクトされます。

補足

上記は基本的な使い方のみです。詳細は公式ドキュメントを参照してください。
v6ではRedirectコンポーネントは非推奨になり、代わりにuseNavigateフックを使用する必要があります。

ログイン認証に基づいたリダイレクト

const App = () => {
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  const handleLogin = () => {
    setIsAuthenticated(true);
  };

  return (
    <div>
      {isAuthenticated ? (
        <Redirect to="/home" />
      ) : (
        <LoginButton onClick={handleLogin} />
      )}
    </div>
  );
};

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

特定の条件に基づいたリダイレクト

const MyComponent = () => {
  const [isConditionMet, setIsConditionMet] = useState(false);

  const handleConditionMet = () => {
    setIsConditionMet(true);
  };

  return (
    <div>
      {isConditionMet ? (
        <Redirect to="/home" />
      ) : (
        <button onClick={handleConditionMet}>条件を満たす</button>
      )}
    </div>
  );
};

オプションの使用

const MyComponent = () => {
  return (
    <Redirect to="/home" push state={{ from: "/my-component" }} />
  );
};

ReactJSのReact-Router-Dom v5におけるリダイレクトの他の方法

useNavigateフック

v6で導入されたuseNavigateフックを使用して、リダイレクトを実装できます。

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

  const handleClick = () => {
    navigate("/home");
  };

  return (
    <div>
      <button onClick={handleClick}>リダイレクト</button>
    </div>
  );
};

historyオブジェクト

react-router-domパッケージによって提供されるhistoryオブジェクトを使用して、リダイレクトを実装できます。

const MyComponent = () => {
  const history = useHistory();

  const handleClick = () => {
    history.push("/home");
  };

  return (
    <div>
      <button onClick={handleClick}>リダイレクト</button>
    </div>
  );
};

LinkコンポーネントのtoプロパティにURLを指定することで、リダイレクトを実装できます。

const MyComponent = () => {
  return (
    <div>
      <Link to="/home">リダイレクト</Link>
    </div>
  );
};

window.locationオブジェクト

ブラウザのwindow.locationオブジェクトを使用して、リダイレクトを実装できます。

const MyComponent = () => {
  const handleClick = () => {
    window.location.href = "/home";
  };

  return (
    <div>
      <button onClick={handleClick}>リダイレクト</button>
    </div>
  );
};