React Router v6 でプログラムによってルートにリダイレクトする場合の問題

Question

ボタンの onSubmit など、特定のユーザー アクションに対してナビゲーションを実行したいと考えています。ユーザーが「連絡先の追加」ボタンをクリックしたと仮定して、react-router がホームページ「/」でリダイレクトするようにします。現在、私はこの問題に直面しています -->TypeError:Cannotreadpropertiesofundefine(reading'push') 初心者として、専門家の助けを本当に感謝しています。 AddContacts.jsimportReact、{コンポーネント}から」

P粉905144514 · Answer

React Router v6 でリダイレクトする方法

リーリー

P粉384244473 · Answer

＃＃＃質問＃＃＃

これは、存在しない未定義の

navigate

プロパティから移動しようとしているためです。 リーリー

useNavigate

フックは関数コンポーネントとのみ互換性があるため、クラスコンポーネントで navigate を使用する必要がある場合は、AddContacts を次のように変換する必要があります。関数コンポーネント、または独自のカスタム withRouter 高次コンポーネントをロールして、react-router- の withRouter HOC v5 などの「ルートプロパティ」を挿入します。 dom.xはやりました。＃＃＃解決＃＃＃クラスコンポーネントを関数コンポーネントに変換する方法は紹介しません。カスタム

withRouter HOC の例を次に示します: 
リーリー
そして、AddContacts コンポーネントを新しい HOC で装飾します。 
リーリー
navigate プロパティ (および設定した他のプロパティ 
) が装飾されたコンポーネントに渡され、this.navigate が定義されます。 
 さらに、ナビゲーション API は v5 から v6 に変更され、直接の history オブジェクトは使用されなくなりました。 
navigate はオブジェクトではなく関数です。使用するには、関数を呼び出して 1 つまたは 2 つの引数を渡します。最初の引数はターゲット パスで、2 つ目は replace キーや state キーを使用したオプションの「オプション」です。価値。 

これで、ナビゲーションは次のようになります:
リーリー

React Router v6 でプログラムによってルートにリダイレクトする場合の問題

全員に返信(2)返信します

これは、存在しない未定義の

HOC の例を次に示します: