React Router v6 クラスコンポーネントでプログラムによるリダイレクトを処理するにはどうすればよいですか?

問題の理解: React Router v6 のリダイレクト

React Router v6 のプログラムによるナビゲーションには、以前のバージョンと比較して独特の課題があります。以前のイテレーションで蔓延していたクラス コンポーネントで、未定義のナビゲーション プロパティが発生し、TypeError が発生します。

問題の原因

React Router v6 では、ナビゲーション戦略にシフトが導入され、履歴オブジェクトの直接使用。代わりに、ターゲット パスとオプションのオプションを受け入れる関数 API である navigate を使用します。この変更はクラス コンポーネントに影響を及ぼし、ナビゲーション プロパティに自動的にアクセスできなくなりました。

問題の解決

この問題を解決するには、主に 2 つのアプローチがあります:

1. クラス コンポーネントから関数コンポーネントへの変換:
   このアプローチには、クラス コンポーネントを関数コンポーネントに変換することが含まれます。これにより、useNavigate を含む、react-router-dom のフックを直接使用できるようになります。

2. カスタム withRouter 高次コンポーネントの作成:
   関数コンポーネントへの変換が不可能な場合は、基本的にナビゲーションを挿入するカスタム高次コンポーネント (HOC) を作成できます。ターゲットコンポーネントにpropします。 withRouter という名前の HOC の例を次に示します。

   <code class="js">const withRouter = WrappedComponent => props => {
     const navigate = useNavigate();
     return (
       <WrappedComponent
         {...props}
         navigate={navigate}
       />
     );
   };</code>

ソリューションの実装

withRouter HOC を作成したら、それをターゲット クラス コンポーネントに適用します。次のように Contacts を追加します。

<code class="js">export default withRouter(AddContacts);</code>

これにより、ラップされたコンポーネントに navigate prop が公開され、プログラムによるナビゲーションを実行できるようになります。

ナビゲーション API の変更

に加えて、クラス コンポーネントからの切り替えに伴い、React Router v6 ではナビゲーション API にも変更が加えられました。以前に使用した履歴オブジェクトの代わりに、ターゲット パスとオプションの状態または置換フラグを渡して、ナビゲート関数を呼び出す必要があります。

<code class="js">this.props.navigate("/");</code>

前述のソリューションのいずれかを実装し、更新されたナビゲーション API を理解することで、を使用すると、React Router v6 のクラス コンポーネントからプログラムによるリダイレクトを正常に実行できます。

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