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 code> 高次コンポーネントをロールして、react-router- の withRouter HOC v5 などの「ルートプロパティ」を挿入します。 dom.xはやりました。＃＃＃解決＃＃＃クラスコンポーネントを関数コンポーネントに変換する方法は紹介しません。カスタム

withRouter

HOC の例を次に示します:

リーリー

そして、AddContacts コンポーネントを新しい HOC で装飾します。

リーリー

navigate プロパティ (および設定した他のプロパティ

) が装飾されたコンポーネントに渡され、

this.navigate が定義されます。 さらに、ナビゲーション API は v5 から v6 に変更され、直接の history オブジェクトは使用されなくなりました。

navigate

はオブジェクトではなく関数です。使用するには、関数を呼び出して 1 つまたは 2 つの引数を渡します。最初の引数はターゲットパスで、2 つ目は replace キーや state キーを使用したオプションの「オプション」です。価値。これで、ナビゲーションは次のようになります:リーリー