Ich möchte bei einigen Benutzeraktionen eine Navigation durchführen, z. B. beim Senden einer Schaltfläche. Angenommen, der Benutzer klickt auf die Schaltfläche „Kontakt hinzufügen“, möchte ich, dass der React-Router auf der Startseite „/“ umleitet. Derzeit stehe ich vor diesem Problem --> TypeError: Cannot readproperties of undefined (reading 'push') würde mich über die Hilfe von Experten sehr freuen.

AddContacts.js

import React, { Component } from "react"; import { Consumer } from "../../context"; import TextInputGroup from "../layout/TextInputGroup"; import { v4 as uuidv4 } from "uuid"; import { useNavigate } from "react-router-dom"; 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.push("/"); }; onChange = (e) => this.setState({ [e.target.name]: e.target.value }); render() { const { name, email, phone, errors } = this.state; return (  {(value) => { const { dispatch } = value; return ( 
 
Add Contacts
 
 
      
 
 ); }}  ); } } export default AddContacts;

Dies ist die App.js-Datei

import React, { Component } from "react"; import { BrowserRouter, Routes, Route, Link } from "react-router-dom"; import Contacts from "./components/contacts/Contacts"; import Header from "./components/layout/Header"; import AddContacts from "./components/contacts/AddContacts"; import About from "./components/pages/About"; import { Provider } from "./context"; import "bootstrap/dist/css/bootstrap.min.css"; import "./App.css"; function App() { return (   
 
 
  } />{" "} } />{" "} } />{" "} {" "} 
{" "} 
{" "} {" "}  ); } export default App;