Isu apabila mengubah hala secara atur cara ke laluan dalam React Router v6

Question

Saya ingin melakukan navigasi pada tindakan pengguna tertentu, seperti padaSubmit butang. Dengan mengandaikan pengguna mengklik butang "Tambah Kenalan", saya mahu penghala tindak balas untuk mengubah hala dalam halaman utama "/". Pada masa ini saya menghadapi masalah ini --> TypeError: Tidak boleh membaca sifat yang tidak ditentukan (membaca 'push' Sebagai seorang pemula, saya amat menghargai bantuan daripada pakar).

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 (
      <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;

Ini ialah fail 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

Cara mengubah hala dalam React Router v6

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

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

Answer 2

Soalan

Ini kerana anda cuba menavigasi dari navigate harta yang tidak wujud, ia tidak ditentukan.

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

Cangkuk

useNavigate hanya serasi dengan komponen fungsi, jadi jika anda mahu/perlu menggunakan useNavigate 挂钩仅与函数组件兼容，因此如果您想要/需要将 navigate 与类组件一起使用，则必须转换 AddContacts 到函数组件，或者滚动您自己的自定义 withRouter 高阶组件来注入“路由道具”，例如来自 react-router-dom 的 withRouter HOC dengan komponen kelas, anda perlu menukar AddContacts kepada komponen fungsi, atau gulungkan komponen tertib

tersuai anda sendiri untuk menyuntik "perangkap penghalaan", seperti

HOC v5.x daripada react-router-dom melakukannya.

PenyelesaianwithRouter

Saya tidak akan membincangkan cara menukar komponen kelas kepada komponen fungsi. Berikut ialah contoh adat

HOC: AddContacts

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

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

Dan gunakan komponen

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

export default withRouter(AddContacts);

Harta

(dan mana-mana sifat lain yang anda tetapkan) kini akan diserahkan kepada komponen yang dihias dan this.navigate kini akan ditakrifkan. history 对象。 navigate 是一个函数而不是一个对象。要使用您调用函数并传递 1 或 2 个参数，第一个是目标路径，第二个是带有 replace 和/或 state

Selain itu, API navigasi berubah daripada v5 kepada v6 dan tidak lagi menggunakan objek langsung sejarah.

ialah fungsi bukan objek. Untuk menggunakan anda memanggil fungsi dan lulus 1 atau 2 argumen, yang pertama ialah laluan sasaran dan yang kedua ialah objek/nilai "pilihan" pilihan.

🎜Sekarang navigasi adalah seperti berikut:🎜

this.props.navigate("/");