React Router における Redirect の使用

1. 機能コンポーネントでの React ルーターリダイレクト
2. クラスコンポーネントでの React ルーターリダイレクト

複雑な Web アプリケーションに取り組んでいる開発者であれば、ルーティングの重要性をおそらく理解しているでしょう。ルートは、アプリのナビゲーションシステムを構成する重要な要素の 1つです。ReactJ の開発者は、react-router-dom パッケージを使用してアプリケーションのルートを作成する傾向があります。

フォーム（またはその他のユーザーアクション）を送信した後、アプリケーションが別の URL に移動する必要がある場合があります。この記事では、React でリダイレクトを処理する方法を見ていきます。

機能コンポーネントでの React ルーターリダイレクト

フックは、機能コンポーネントの基本機能を拡張できます。React 開発者は、useReducer()、useState()、useEffect() などの組み込みフックを使用するか、独自のカスタマイズされたバージョンを作成できます。

useHistory() フック

useHistory() は、コンポーネントの現在の場所（URL）を含む history インスタンスを返します。リダイレクトの処理は、このフックの主な目的ではありません。ただし、React Router の新しいバージョン（5 以降）では、このフックを使用して、効率的で読みやすい方法でユーザーをリダイレクトできます。

例を見てみましょう：

import { useHistory } from "react-router-dom"
function SampleComponent() {
  let history = useHistory()
  function handleClick() {
    history.push("/somepage")
  }

  return (
    <span onClick={() => handleClick()}>
      Go home
    </span>
  )
}

この例では、react-router-dom パッケージから useHistory フックをインポートします。次に、click イベントのイベントハンドラーを使用して単一の <span> 要素を返す単純な機能コンポーネントを定義します。

また、useHistory() フックによって返されたインスタンスを格納するための history 変数を作成します。

イベントハンドラー関数の本体では、.push() メソッドを使用し、引数として文字列を渡します。このメソッドの引数は、最後に現在の URL に追加されます。したがって、アプリケーションが localhost:3000 ポートで実行されていて、click イベントを処理する必要がある場合、URL は localhost:3000/somepage に変更されます。

クラスコンポーネントでの React ルーターリダイレクト

アクション（フォームの送信、ボタンのクリック、またはその他のユーザーアクション）を実行した後に別の URL に移動する別の方法は、カスタムの <リダイレクト> コンポーネントを使用することです。 "react-router-dom"ライブラリからインポートできます。
状態値に基づいて条件付きでリダイレクトすることにより、リダイレクトがいつ行われるかを制御できます。この例を見てみましょう：

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

class MyComponent extends React.Component {
  constructor(props){
     super(props)
     this.state = {
    	    condition: false
  		}
  }
  handleClick () {
    axios.post(/*URL*/)
      .then(() => this.setState({ condition: true }));
  }

  render () {
    const { condition } = this.state;

     if (condition) {
       return <Redirect to='/somePage'/>;
     }
     return <button onClick={() => this.handleClick()}>Redirect</button>;
}

私たちの状態には、false に設定された condition プロパティがあります。このブール値のため、<Redirect> コンポーネントはレンダリングされず、ユーザーの URL は変更されません。

1つのボタンをクリックすることで、ユーザーは condition プロパティを true に設定するイベントハンドラーをトリガーできます。この場合、if ステートメントの基準が満たされ、render 関数は <Redirect> コンポーネントを返します。これにより、ユーザーは指定された相対パスに移動します。

この場合、アプリケーションのホームページが localhost:3000 にあり、<Redirect> コンポーネントに値が'/somePage'の to 属性がある場合、ユーザーは localhost:3000/somePage という場所にリダイレクトされます。

this.props.history.push("")

useHistory() フックを使用することは、ユーザーの現在の場所にアクセスする唯一の方法ではありません。開発者は、props オブジェクトの history プロパティを読み取ることにより、両方のタイプのコンポーネントで同じことを実現できます。

ボタンをクリックした後にリダイレクトを実行する場合は、onClick イベントハンドラーを設定する必要があります。このハンドラーは、.push("") メソッドを使用して、ユーザーがリダイレクトされる場所への相対パスを提供します。。次に例を示します。

<button onClick={this.props.history.push('/somePage')}>Redirect to some page </button>

現在の場所が localhost:3000 ホームページにある場合、このボタンをクリックすると、ユーザーは localhost:3000/somePage URL に移動します。