React Router v6 でクラスコンポーネントからプログラムでリダイレクトする方法は?

React Router v6 で、クラス コンポーネントから特定のルートにプログラムでリダイレクトするにはどうすればよいですか?

問題:

React Router v6 のクラス コンポーネントから別のルートにプログラムでリダイレクトしようとすると、次のエラーが発生する場合があります:

TypeError: Cannot read properties of undefined (reading 'push')

このエラーは、v6 のクラス コンポーネントでは navigate prop が使用できないために発生します。 。代わりに、関数コンポーネントにのみアクセスできます。

解決策:

この問題を解決するには、2 つの方法があります:

1. クラス コンポーネントを関数コンポーネントに変換します。

   • フック (useState、useEffect、useNavigate など) を使用して、AddContacts クラス コンポーネントを関数コンポーネントに変換します。

2. カスタム withRouter HOC を作成します:

   • navigate prop などを挿入する withRouter と呼ばれる高次コンポーネント (HOC) を作成します。 React Router はラップされたコンポーネントにフックします。
   • 次の方法で withRouter HOC で AddContacts コンポーネントを装飾します。

import withRouter from './withRouter'; // Change this to the path of your custom HOC file

export default withRouter(AddContacts);

これにより、ナビゲートが提供されます。

追加の注意:

React Router v6 では、ナビゲーション関数はオブジェクトではなくなり、ターゲット パスを次のように取り込む関数になりました。最初の引数と 2 番目の引数としてのオプションのオプション オブジェクト。

interface NavigateFunction {
  (
    to: To,
    options?: { replace?: boolean; state?: State }
  ): void;
  (delta: number): void;
}

これは、ナビゲーションの構文も変更されたことを意味します。 navigate を使用してルートに移動するには、次のように関数を呼び出します。

// Example usage
this.props.navigate("/");

上記のいずれかの解決策に従うことで、React Router v6 の別のルートにプログラムでリダイレクトできるようになります。

以上がReact Router v6 でクラスコンポーネントからプログラムでリダイレクトする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。