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

Patricia Arquette
リリース: 2024-10-31 23:34:28
オリジナル
695 人が閲覧しました

How to Programmatically Redirect in React Router v6 from a Class Component?

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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!