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 取代。]