Heim > Artikel > Web-Frontend > Wie behebe ich „TypeError: Eigenschaften von Undefiniert können nicht gelesen werden (reading \'push\')\“ beim Versuch einer Umleitung in React Router v6?
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.
Verwenden Sie den useNavigate-Hook für die Navigation innerhalb einer Funktionskomponente. Dieser Haken ist nur mit Funktionskomponenten kompatibel.
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);
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!