this.props.history.push('/') 在 CLASS 組件中不起作用

Question

請幫助我解決 this.props.history.push('/') IS NOT WORKING in CLASS Component 的問題。 因為我們沒有任何 scope 的使用歷史了。 無法實施導航。 請幫忙。 與 props.location.state.contact 相同的問題。

**const { name, email } = props.location.state.contact;**

import React, { Component } from "react";
import "../assets/css/AddContact.css";
import { Navigate } from "react-router-dom";
import { v4 as uuid } from "uuid";

class AddContact extends Component {
  state = {
    id: uuid(),
    name: "",
    email: "",
  };

 
  add = (e) => {
    e.preventDefault();
    if (this.state.name === "" || this.state.email === "") {
      alert("All fields are required!");
      return;
    }
    this.props.addContactHandler(this.state);
    this.setState({ name: "", email: "" });
    this.props.history.push("/");
  };

  render() {
    return (
      <div className="contactForm">
        <h2 className="contactForm__title">Add Contact</h2>
        <div className="contactForm__form">
          <form action="/" method="post" onSubmit={this.add}>
            <div className="contactForm__nameField">
              <label htmlFor="name">Name</label>
              <br />
              <input
                type="text"
                placeholder="Enter your name"
                name="name"
                id="name"
                value={this.state.name}
                onChange={(e) => this.setState({ name: e.target.value })}
              />
            </div>
            <div className="contactForm__emailField">
              <label htmlFor="email">Email</label>
              <br />
              <input
                type="email"
                placeholder="Enter your email"
                name="email"
                id="email"
                value={this.state.email}
                onChange={(e) => this.setState({ email: e.target.value })}
              />
            </div>
            <button className="contactForm__button">Add</button>
          </form>
        </div>
      </div>
    );
  }
}

export default AddContact;

我嘗試了所有參考資料。

Answer 1

您需要使用 React Router 庫隨附的withRouter高階組件才能訪問這些道具（自動history和location ）。

所以只需導入它，然后將導出更改為

export default withRouter(AddContact);

[請注意，這假設您使用的是 React Router v5 或之前的版本——最新版本的 v6 中沒有withRouter 。 但是您使用 class 組件意味着您使用的是早期版本 - v6 只有在您使用 function 組件時才能正常工作，因為withRouter已被 Hooks 取代。]