Bagaimana untuk Menyelesaikan \"TypeError: Tidak Dapat Membaca Sifat Undefined (membaca \'push\')\" Apabila Mencuba Mengubah Hala dalam React Router v6?

Menavigasi Secara Pengaturcaraan dengan React Router v6: Menyelesaikan TypeError

Masalah

Menghadapi mesej ralat "TypeError: Tidak dapat membaca sifat yang tidak ditentukan (membaca 'push ')" apabila cuba mengubah hala selepas tindakan pengguna, seperti mengklik butang serah. Ini menunjukkan bahawa prop navigasi yang digunakan untuk ubah hala tidak ditentukan.

Penyelesaian

1. Tukar kepada Komponen Fungsi

Gunakan cangkuk useNavigate untuk navigasi dalam komponen fungsi. Cangkuk ini hanya serasi dengan komponen fungsi.

2. Cipta HOC Tersuai untuk Komponen Kelas

Hoc Tersuai dengan Router:

const withRouter = WrappedComponent => props => {
  const navigate = useNavigate();
  // etc... other react-router-dom v6 hooks

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

Hias Komponen Kelas:

export default withRouter(AddContacts);

3. Gunakan Fungsi Navigate

Gunakan fungsi navigasi untuk navigasi dan bukannya objek sejarah yang digunakan dalam versi sebelumnya React Router. Sintaks telah bertukar kepada:

this.props.navigate("/path");

Kod kerja lengkap untuk AddContacts.js:

import React, { Component } from "react";
import { Consumer } from "../../context";
import TextInputGroup from "../layout/TextInputGroup";
import { v4 as uuidv4 } from "uuid";
import withRouter from "./withRouter"; // Custom HOC

class AddContacts extends Component {
  state = {
    name: "",
    email: "",
    phone: "",
    errors: {},
  };

  onSubmit = (dispatch, e) => {
    e.preventDefault();

    const { name, email, phone } = this.state;

    //Check for errors

    if (name === "") {
      this.setState({ errors: { name: "Name is required" } });
      return;
    }
    if (email === "") {
      this.setState({ errors: { email: "Email is required" } });
      return;
    }
    if (phone === "") {
      this.setState({ errors: { phone: "Phone is required" } });
      return;
    }

    const newContact = {
      id: uuidv4(),
      name,
      email,
      phone,
    };
    dispatch({ type: "ADD_CONTACT", payload: newContact });

    this.setState({
      name: "",
      email: "",
      phone: "",
      errors: {},
    });
    this.props.navigate("/"); // Navigate using custom HOC
  };

  onChange = (e) => this.setState({ [e.target.name]: e.target.value });
  render() {
    const { name, email, phone, errors } = this.state;

    return (
      <Consumer>
        {(value) => {
          const { dispatch } = value;

          return (
            <div className="card mb-3">
              <div className="card-header">Add Contacts</div>
              <div className="card-body">
                <form onSubmit={this.onSubmit.bind(this, dispatch)}>
                  <TextInputGroup
                    label="Name"
                    name="name"
                    placeholder="Enter Name..."
                    value={name}
                    onChange={this.onChange}
                    error={errors.name}
                  />
                  <TextInputGroup
                    label="Email"
                    name="email"
                    type="email"
                    placeholder="Enter Email..."
                    value={email}
                    onChange={this.onChange}
                    error={errors.email}
                  />
                  <TextInputGroup
                    label="Phone"
                    name="phone"
                    placeholder="Enter Phone..."
                    value={phone}
                    onChange={this.onChange}
                    error={errors.phone}
                  />
                  <input
                    type="submit"
                    value="Add Contact"
                    className="btn btn-light btn-block mt-3"
                  />
                </form>
              </div>
            </div>
          );
        }}
      </Consumer>
    );
  }
}

export default withRouter(AddContacts); // Export wrapped component

Penyelesaian ini membenarkan navigasi daripada komponen kelas dalam React Router v6 , walaupun ralat awal menunjukkan prop navigasi yang tidak ditentukan.

Atas ialah kandungan terperinci Bagaimana untuk Menyelesaikan \"TypeError: Tidak Dapat Membaca Sifat Undefined (membaca \'push\')\" Apabila Mencuba Mengubah Hala dalam React Router v6?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!