Je souhaite effectuer une navigation sur certaines actions de l'utilisateur, telles que la soumission d'un bouton. En supposant que l'utilisateur clique sur le bouton "Ajouter un contact", je souhaite que React-Router redirige vers la page d'accueil "/". Actuellement, je suis confronté à ce problème --> TypeError : Impossible de lire les propriétés d'undéfini (lecture de "push"). En tant que débutant, j'apprécierais vraiment l'aide d'experts.
AjouterContacts.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 ( <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 AddContacts;
Voici le fichier App.js
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 ( <Provider> <BrowserRouter> <div className="App"> <Header branding="Contact manager" /> <div className="container"> <Routes> <Route path="/" element={<Contacts />} />{" "} <Route path="/contact/add/*" element={<AddContacts />} />{" "} <Route path="about/*" element={<About />} />{" "} </Routes>{" "} </div>{" "} </div>{" "} </BrowserRouter>{" "} </Provider> ); } export default App;
Comment rediriger dans React Router v6
Question
C'est parce que vous essayez de naviguer à partir d'une propriété
Le hooknavigate
qui n'existe pas, elle est indéfinie.
de haut niveau pour injecter des "accessoires de routage", tels queuseNavigate
n'est compatible qu'avec les composants de fonction, donc si vous voulez/devez utiliseruseNavigate
挂钩仅与函数组件兼容,因此如果您想要/需要将navigate
与类组件一起使用,则必须转换AddContacts code> 到函数组件,或者滚动您自己的自定义
withRouter
高阶组件来注入“路由道具”,例如来自react-router-dom 的
avec un composant de classe, vous devez convertirwithRouter
HOCAddContacts
en composant de fonction, ou lancez vos propres composants personnalisésHOC v5.x de
react-router-dom le fait.
Solution
Je n'expliquerai pas comment convertir des composants de classe en composants de fonction. Voici un exemple de customwithRouter
HOC :
Et utilisez le nouveau composant de décoration HOCAddContacts
.
La propriéténavigate
属性(以及您设置的任何其他属性)传递给装饰组件,并且this.navigate
(et toutes les autres propriétés que vous définissez) sera désormais transmise au composant décoré, et
De plus, l'API de navigation est passée de la v5 à la v6 et n'utilise plus d'objetsthis.navigate
sera désormais défini.history
对象。navigate
是一个函数而不是一个对象。要使用您调用函数并传递 1 或 2 个参数,第一个是目标路径,第二个是带有replace
和/或state
historique
directs.est une fonction et non un objet. Pour l'utiliser, vous appelez la fonction et transmettez 1 ou 2 arguments, le premier est le chemin cible et le second est un objet/valeur "options" facultatif.
🎜Maintenant, la navigation est la suivante :🎜