Home > Article > Web Front-end > How to Resolve \"TypeError: Cannot Read Properties of Undefined (reading \'push\')\" When Attempting to Redirect in React Router v6?
Encountering the error message "TypeError: Cannot read properties of undefined (reading 'push')" when attempting to redirect after a user action, such as clicking a submit button. This indicates that the navigate prop used for the redirection is undefined.
Use the useNavigate hook for navigation within a function component. This hook is only compatible with function components.
Custom withRouter HOC:
const withRouter = WrappedComponent => props => { const navigate = useNavigate(); // etc... other react-router-dom v6 hooks return ( <WrappedComponent {...props} navigate={navigate} // etc... /> ); };
Decorate the Class Component:
export default withRouter(AddContacts);
Use the navigate function for navigation instead of the history object used in previous versions of React Router. The syntax has changed to:
this.props.navigate("/path");
Complete working code for 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
This solution allows for navigation from class components in React Router v6, despite the initial error indicating an undefined navigation prop.
The above is the detailed content of How to Resolve \"TypeError: Cannot Read Properties of Undefined (reading \'push\')\" When Attempting to Redirect in React Router v6?. For more information, please follow other related articles on the PHP Chinese website!