React Router v6 でリダイレクトを行う

React Router でページをリダイレクトする方法

useNavigate フックは、React Router v6 で導入された新しいフックで、以前の useHistory フックよりも簡潔で使いやすいのが特徴です。

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

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

  const handleClick = () => {
    navigate('/new-page'); // 新しいページにリダイレクト
  };

  return (
    <button onClick={handleClick}>新しいページへ</button>
  );
};

Redirect コンポーネントは、React Router v5 以前で使用されていた方法で、現在でも有効です。

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

const MyComponent = () => {
  return (
    <Redirect to="/new-page" /> // 新しいページにリダイレクト
  );
};

一般的に、useNavigate フックの方が新しく、より簡潔で使いやすいのでおすすめです。

ただし、Redirect コンポーネントの方が、より詳細な制御が必要な場合に役立つことがあります。

例えば、リダイレクトする前に条件チェックを行ったり、リダイレクト時にデータを渡したりする場合などに便利です。

その他の注意点

• リダイレクトする前に、ユーザーに確認メッセージを表示するなど、適切な処理を行うようにしましょう。
• セキュリティ上の理由から、ユーザーが入力した URL に直接リダイレクトすることは避けてください。常にサーバー側で検証してからリダイレクトするようにしましょう。

補足情報

• redux とは、React アプリケーションにおけるデータ管理を容易にするためのライブラリです。
• 本回答では、React Router v6 を前提に説明していますが、v5 以前のバージョンでも同様の手法でリダイレクトを行うことができます。

useNavigate フックを使う

import React from 'react';
import { useNavigate } from 'react-router-dom';

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

  const handleClick = () => {
    navigate('/new-page'); // 新しいページにリダイレクト
  };

  return (
    <button onClick={handleClick}>新しいページへ</button>
  );
}

export default MyComponent;

Redirect コンポーネントを使う

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

function MyComponent() {
  return (
    <Redirect to="/new-page" /> // 新しいページにリダイレクト
  );
}

export default MyComponent;

説明

• 上記のコードは、それぞれ MyComponent というコンポーネントを定義しています。
• MyComponent コンポーネントは、ボタンをクリックすると /new-page にリダイレクトします。
• useNavigate フックと Redirect コンポーネントのどちらを使用するかによって、リダイレクトの方法が異なります。

補足

• 上記のコードはあくまで基本的な例であり、実際の状況に合わせて変更する必要があります。

React Router でページをリダイレクトするその他の方法

以下に、いくつかの例を紹介します。

window.location オブジェクトを使う

window.location.href = '/new-page'; // 新しいページにリダイレクト

<Link> コンポーネントの to プロパティに replace 属性を指定する

<Link to="/new-page" replace>新しいページへ</Link> // 新しいページにリダイレクト (ブラウザ履歴に残らない)

プロграмmatic navigation を使う

import { createBrowserHistory } from 'history';

const history = createBrowserHistory();

history.push('/new-page'); // 新しいページにリダイレクト

それぞれの方法のメリットとデメリット

状況に応じて適切な方法を選択する必要があります。

• シンプルで分かりやすい方法を求める場合は、useNavigate フックがおすすめです。
• 詳細な制御が必要な場合は、Redirect コンポーネントやプロграмmatic navigation を使用することができます。
• アクセシビリティを重視する場合は、<Link> コンポーネントを使用することができます。