Problèmes lors de la redirection par programme vers des routes dans React Router v6

Question

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;

Answer 1

Comment rediriger dans React Router v6

import {  useNavigate  } from "react-router-dom";

  const navigate = useNavigate();
  
  const handleClick = () => {
    navigate("/dashboard");
  };

Answer 2

Question

C'est parce que vous essayez de naviguer à partir d'une propriété navigate qui n'existe pas, elle est indéfinie.

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

Le hook

useNavigate n'est compatible qu'avec les composants de fonction, donc si vous voulez/devez utiliser useNavigate 挂钩仅与函数组件兼容，因此如果您想要/需要将 navigate 与类组件一起使用，则必须转换 AddContacts 到函数组件，或者滚动您自己的自定义 withRouter 高阶组件来注入“路由道具”，例如来自 react-router-dom 的 withRouter HOC avec un composant de classe, vous devez convertir AddContacts en composant de fonction, ou lancez vos propres composants personnalisés

de haut niveau pour injecter des "accessoires de routage", tels que

HOC v5.x de react-router-dom le fait.

SolutionwithRouter

Je n'expliquerai pas comment convertir des composants de classe en composants de fonction. Voici un exemple de custom

HOC : AddContacts

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

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

Et utilisez le nouveau composant de décoration HOC

. navigate 属性（以及您设置的任何其他属性）传递给装饰组件，并且 this.navigate

export default withRouter(AddContacts);

La propriété

(et toutes les autres propriétés que vous définissez) sera désormais transmise au composant décoré, et this.navigate sera désormais défini. history 对象。 navigate 是一个函数而不是一个对象。要使用您调用函数并传递 1 或 2 个参数，第一个是目标路径，第二个是带有 replace 和/或 state

De plus, l'API de navigation est passée de la v5 à la v6 et n'utilise plus d'objets 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 :🎜

this.props.navigate("/");