Wie behebe ich „TypeError: Eigenschaften von Undefiniert können nicht gelesen werden (reading \'push\')\“ beim Versuch einer Umleitung in React Router v6?

Programmgesteuertes Navigieren mit React Router v6: Beheben von TypeError

Problem

Es wird die Fehlermeldung „TypeError: Eigenschaften von undefiniert können nicht gelesen werden (lesen von 'push ')“ beim Versuch einer Weiterleitung nach einer Benutzeraktion, z. B. dem Klicken auf eine Senden-Schaltfläche. Dies weist darauf hin, dass die für die Umleitung verwendete Navigationsstütze nicht definiert ist.

Lösung

1. In eine Funktionskomponente konvertieren

Verwenden Sie den useNavigate-Hook für die Navigation innerhalb einer Funktionskomponente. Dieser Haken ist nur mit Funktionskomponenten kompatibel.

2. Erstellen Sie ein benutzerdefiniertes HOC für Klassenkomponenten

Benutzerdefiniert mit Router-HOC:

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

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

Dekorieren Sie die Klassenkomponente:

export default withRouter(AddContacts);

3. Verwenden Sie die Navigationsfunktion

Verwenden Sie die Navigationsfunktion für die Navigation anstelle des in früheren Versionen von React Router verwendeten Verlaufsobjekts. Die Syntax hat sich geändert in:

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

Vollständiger Arbeitscode für 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

Diese Lösung ermöglicht die Navigation von Klassenkomponenten in React Router v6 , trotz des anfänglichen Fehlers, der auf eine undefinierte Navigationsstütze hinweist.

Das obige ist der detaillierte Inhalt vonWie behebe ich „TypeError: Eigenschaften von Undefiniert können nicht gelesen werden (reading \'push\')\“ beim Versuch einer Umleitung in React Router v6?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!