Redirect コンポーネントを使ってリダイレクトする

React Routerで別のルートにリダイレクトする方法

Redirect コンポーネントは、ユーザーを別のルートにリダイレクトするために使用されます。

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

const MyComponent = () => {
  // ログイン状態をチェック
  const isLoggedIn = localStorage.getItem('isLoggedIn');

  // ログインしていない場合は、ログイン画面にリダイレクト
  if (!isLoggedIn) {
    return <Redirect to="/login" />;
  }

  // ログインしている場合は、通常のコンポーネントの処理
  return (
    <div>
      <h1>コンポーネントの内容</h1>
    </div>
  );
};

export default MyComponent;

Redirect コンポーネントの to プロパティには、リダイレクト先のパスを指定します。

useNavigate フックを使う

React Router v6では、useNavigate フックを使ってリダイレクトすることができます。

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

const MyComponent = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const navigate = useNavigate();

  useEffect(() => {
    // ログイン状態をチェック
    const isLoggedIn = localStorage.getItem('isLoggedIn');
    setIsLoggedIn(isLoggedIn);

    // ログインしていない場合は、ログイン画面にリダイレクト
    if (!isLoggedIn) {
      navigate('/login');
    }
  }, []);

  // ログインしている場合は、通常のコンポーネントの処理
  return (
    <div>
      <h1>コンポーネントの内容</h1>
    </div>
  );
};

export default MyComponent;

useNavigate フックは、リダイレクト先のパスを引数として渡して呼び出すことで、リダイレクトを実行します。

history オブジェクトを使う

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';

class MyComponent extends Component {
  constructor(props) {
    super(props);

    // ログイン状態をチェック
    const isLoggedIn = localStorage.getItem('isLoggedIn');

    // ログインしていない場合は、ログイン画面にリダイレクト
    if (!isLoggedIn) {
      this.props.history.push('/login');
    }
  }

  // ログインしている場合は、通常のコンポーネントの処理
  render() {
    return (
      <div>
        <h1>コンポーネントの内容</h1>
      </div>
    );
  }
}

export default withRouter(MyComponent);

history オブジェクトの push メソッドを使って、リダイレクト先のパスを渡すことで、リダイレクトを実行します。

React Routerで別のルートにリダイレクトするには、いくつかの方法があります。状況に合わせて適切な方法を選択してください。

Redirect コンポーネントを使う

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

const MyComponent = () => {
  // ログイン状態をチェック
  const isLoggedIn = localStorage.getItem('isLoggedIn');

  // ログインしていない場合は、ログイン画面にリダイレクト
  if (!isLoggedIn) {
    return <Redirect to="/login" />;
  }

  // ログインしている場合は、通常のコンポーネントの処理
  return (
    <div>
      <h1>コンポーネントの内容</h1>
    </div>
  );
};

export default MyComponent;

useNavigate フックを使う

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

const MyComponent = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const navigate = useNavigate();

  useEffect(() => {
    // ログイン状態をチェック
    const isLoggedIn = localStorage.getItem('isLoggedIn');
    setIsLoggedIn(isLoggedIn);

    // ログインしていない場合は、ログイン画面にリダイレクト
    if (!isLoggedIn) {
      navigate('/login');
    }
  }, []);

  // ログインしている場合は、通常のコンポーネントの処理
  return (
    <div>
      <h1>コンポーネントの内容</h1>
    </div>
  );
};

export default MyComponent;

history オブジェクトを使う

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';

class MyComponent extends Component {
  constructor(props) {
    super(props);

    // ログイン状態をチェック
    const isLoggedIn = localStorage.getItem('isLoggedIn');

    // ログインしていない場合は、ログイン画面にリダイレクト
    if (!isLoggedIn) {
      this.props.history.push('/login');
    }
  }

  // ログインしている場合は、通常のコンポーネントの処理
  render() {
    return (
      <div>
        <h1>コンポーネントの内容</h1>
      </div>
    );
  }
}

export default withRouter(MyComponent);

補足

リダイレクトしたい条件は状況によって異なるので、サンプルコードを参考に、必要に応じて修正してください。

React Routerで別のルートにリダイレクトするその他の方法

<Link> コンポーネントの to プロパティに replace オプションを指定すると、現在の履歴エントリを置き換えてリダイレクトすることができます。

<Link to="/login" replace>ログイン</Link>

useLocation フックを使って、現在の URL を取得することができます。

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

const MyComponent = () => {
  const location = useLocation();

  // 現在の URL が `/` ではない場合は、`/` にリダイレクト
  if (location.pathname !== '/') {
    return <Redirect to="/" />;
  }

  // 現在の URL が `/` の場合は、通常のコンポーネントの処理
  return (
    <div>
      <h1>コンポーネントの内容</h1>
    </div>
  );
};

export default MyComponent;

withRouter HOCを使って、コンポーネントに history オブジェクトなどのルーター関連のプロパティを渡すことができます。

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';

class MyComponent extends Component {
  constructor(props) {
    super(props);

    // ログイン状態をチェック
    const isLoggedIn = localStorage.getItem('isLoggedIn');

    // ログインしていない場合は、ログイン画面にリダイレクト
    if (!isLoggedIn) {
      this.props.history.push('/login');
    }
  }

  // ログインしている場合は、通常のコンポーネントの処理
  render() {
    return (
      <div>
        <h1>コンポーネントの内容</h1>
      </div>
    );
  }
}

export default withRouter(MyComponent);