Bagaimana untuk Membetulkan Ralat \"TypeError: Tidak dapat membaca sifat undefined (membaca \'push\')\" dalam React Router v6?

Menavigasi Secara Pengaturcaraan dalam React Router v6

Navigasi terprogram dalam React Router v6 boleh membentangkan "TypeError: Cannot read properties of undefined (membaca ' push')" ralat. Ini berlaku apabila cuba menavigasi daripada prop navigasi yang tidak wujud, yang tidak ditentukan.

Punca:

Cakuk useNavigate direka untuk komponen fungsi. Komponen kelas memerlukan Komponen Pesanan Tinggi (HOC) tersuai atau penukaran kepada komponen berfungsi.

Penyelesaian 1: Tukar kepada Komponen Fungsian

Tukar AddContacts kepada komponen fungsi dan gunakan 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>

Penyelesaian 2: Tersuai denganPenghala HOC

Buat tersuai denganRouter HOC:

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

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

Dan bungkus AddContacts dengan HOC:

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

Sintaks Navigasi Kemas Kini

Dalam React Router v6, fungsi navigasi telah berubah sintaks:

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

Oleh itu, pernyataan navigasi menjadi:

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

Dengan menggunakan penyelesaian ini, anda boleh menavigasi secara berkesan secara pengaturcaraan dalam React Router v6 dan mengelakkan ralat navigasi yang tidak ditentukan.

Atas ialah kandungan terperinci Bagaimana untuk Membetulkan Ralat \"TypeError: Tidak dapat membaca sifat undefined (membaca \'push\')\" dalam React Router v6?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!