ホームページ >ウェブフロントエンド >jsチュートリアル >React Router v6 でクラスコンポーネントを使用してプログラムでリダイレクトする方法は?
TypeError が発生する: 未定義のプロパティを読み取れません ('push' を読み取っています) ) クラス コンポーネントで useNavigate フックを使用して移動しようとしているときに発生します。
React Router v6 では、useNavigate は関数コンポーネントとのみ互換性があります。これをクラス コンポーネント (AddContacts) で使用しようとすると、未定義のままになり、エラーが発生します。
この問題を解決するには、2 つのオプションがあります:
AddContacts クラス コンポーネントを関数コンポーネントにリファクタリングします。これにより、関数内で useNavigate フックを直接使用できるようになります。
カスタム 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 コンポーネントに渡され、期待どおりに使用できるようになります。
React Router v6 では、ナビゲーション API が変更されました。履歴オブジェクトは直接使用されなくなりました。代わりに、1 つまたは 2 つの引数を取るナビゲート関数があります。ターゲット パスと、置換または状態のオプションの「オプション」オブジェクトです。
プログラムでナビゲートするには、次の構文を使用します。
this.props.navigate('/');
以上がReact Router v6 でクラスコンポーネントを使用してプログラムでリダイレクトする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。