React Router v6 でクラスコンポーネントを使用してプログラムでリダイレクトする方法は?

React Router v6 のルートにプログラムでリダイレクトする際の問題

問題

TypeError が発生する: 未定義のプロパティを読み取れません ('push' を読み取っています) ) クラス コンポーネントで useNavigate フックを使用して移動しようとしているときに発生します。

原因

React Router v6 では、useNavigate は関数コンポーネントとのみ互換性があります。これをクラス コンポーネント (AddContacts) で使用しようとすると、未定義のままになり、エラーが発生します。

解決策

この問題を解決するには、2 つのオプションがあります:

1. AddContacts を関数コンポーネントに変換

AddContacts クラス コンポーネントを関数コンポーネントにリファクタリングします。これにより、関数内で useNavigate フックを直接使用できるようになります。

2.カスタム withRouter HOC (高次コンポーネント) を使用する

カスタム withRouter HOC を作成して、useNavigate を含むルート プロパティを AddContacts コンポーネントに挿入します。

カスタム withRouter HOC の例を次に示します:

const withRouter = (WrappedComponent) => (props) => {
  const navigate = useNavigate();

  return (
    <WrappedComponent
      {...props}
      navigate={navigate}
    />
  );
};

次に、AddContacts コンポーネントを HOC で装飾します。

export default withRouter(AddContacts);

これにより、navigate prop が AddContacts コンポーネントに渡され、期待どおりに使用できるようになります。

ナビゲーション API の変更に関する注意

React Router v6 では、ナビゲーション API が変更されました。履歴オブジェクトは直接使用されなくなりました。代わりに、1 つまたは 2 つの引数を取るナビゲート関数があります。ターゲット パスと、置換または状態のオプションの「オプション」オブジェクトです。

プログラムでナビゲートするには、次の構文を使用します。

this.props.navigate('/');

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