React Router v6 の「TypeError: 未定義のプロパティを読み取れません (\'push\' を読み取っています)」エラーを修正する方法?

React Router v6 でのプログラムによるナビゲーション

React Router v6 でのプログラムによるナビゲーションでは、「TypeError: Cannot read property of unknown (reading 'プッシュ')」エラー。これは、存在しない未定義の navigate prop から移動しようとすると発生します。

原因:

useNavigate フックは関数コンポーネント用に設計されています。クラス コンポーネントには、カスタムの高次コンポーネント (HOC) または関数コンポーネントへの変換が必要です。

解決策 1: 関数コンポーネントに変換

AddContacts を関数コンポーネントに変換して使用します。 useNavigate:

<code class="javascript">import { useNavigate } from "react-router-dom";

const AddContacts = () => {
  const navigate = useNavigate();

  const onSubmit = (e) => {
    // ... submit logic ...
    navigate("/");
  };

  return (
    // ... form elements ...
  );
};</code>

解決策 2: カスタム withRouter HOC

カスタム withRouter HOC を作成します:

<code class="javascript">const withRouter = (WrappedComponent) => (props) => {
  const navigate = useNavigate();

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

そして、AddContacts を HOC でラップします:

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

更新されたナビゲーション構文

React Router v6 では、navigate 関数の構文が変更されました:

<code class="javascript">navigate(to, options?);
// where to is the target path and options is an optional object with replace and/or state</code>

したがって、ナビゲーション ステートメントは次のようになります。

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

これらのソリューションを使用すると、React Router v6 でプログラムによって効率的にナビゲーションでき、未定義のナビゲーション エラーを回避できます。

以上がReact Router v6 の「TypeError: 未定義のプロパティを読み取れません (\'push\' を読み取っています)」エラーを修正する方法?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。