Comment résoudre \"TypeError : impossible de lire les propriétés non définies (lecture de \'push\')\" lors d'une tentative de redirection dans React Router v6 ?

Navigation par programme avec React Router v6 : résolution de TypeError

Problème

Rencontre du message d'erreur « TypeError : impossible de lire les propriétés d'undéfini (lecture de 'push ')" lors d'une tentative de redirection après une action de l'utilisateur, comme cliquer sur un bouton d'envoi. Cela indique que l'accessoire de navigation utilisé pour la redirection n'est pas défini.

Solution

1. Convertir en composant de fonction

Utilisez le hook useNavigate pour la navigation dans un composant de fonction. Ce crochet est uniquement compatible avec les composants fonctionnels.

2. Créez un HOC personnalisé pour les composants de classe

Personnalisé avec le routeur HOC :

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

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

Décorez le composant de classe :

export default withRouter(AddContacts);

3. Utilisez la fonction Navigate

Utilisez la fonction Navigate pour la navigation au lieu de l'objet historique utilisé dans les versions précédentes de React Router. La syntaxe a été modifiée comme suit :

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

Code de travail complet pour 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

Cette solution permet la navigation à partir des composants de classe dans React Router v6 , malgré l'erreur initiale indiquant un accessoire de navigation non défini.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!