React Router v6에서 리디렉션을 시도할 때 \'TypeError: 정의되지 않은 속성을 읽을 수 없음(\'push\' 읽기)\'을 해결하는 방법은 무엇입니까?

React Router v6을 사용하여 프로그래밍 방식으로 탐색: TypeError 해결

문제

"TypeError: 정의되지 않은 속성을 읽을 수 없습니다('push 읽기'). 제출 버튼 클릭과 같은 사용자 작업 후에 리디렉션을 시도할 때 ')'가 발생합니다. 이는 리디렉션에 사용된 탐색 속성이 정의되지 않았음을 나타냅니다.

해결 방법

1. 함수 구성 요소로 변환

함수 구성 요소 내에서 탐색하려면 useNavigate 후크를 사용하세요. 이 후크는 기능 컴포넌트에만 호환됩니다.

2. 클래스 구성 요소에 대한 사용자 정의 HOC 만들기

Router HOC를 사용하여 사용자 정의:

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

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

클래스 구성 요소 장식:

export default withRouter(AddContacts);

3. 탐색 기능 사용

이전 버전의 React Router에서 사용했던 히스토리 객체 대신 탐색 기능을 사용하십시오. 구문이 다음으로 변경되었습니다.

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

AddContacts.js에 대한 전체 작업 코드:

import React, { Component } from "react";
import { Consumer } from "../../context";
import TextInputGroup from "../layout/TextInputGroup";
import { v4 as uuidv4 } from "uuid";
import withRouter from "./withRouter"; // Custom HOC

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("/"); // Navigate using custom HOC
  };

  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 withRouter(AddContacts); // Export wrapped component

이 솔루션을 사용하면 React Router v6의 클래스 구성 요소에서 탐색할 수 있습니다. , 정의되지 않은 탐색 속성을 나타내는 초기 오류에도 불구하고.

위 내용은 React Router v6에서 리디렉션을 시도할 때 'TypeError: 정의되지 않은 속성을 읽을 수 없음('push' 읽기)'을 해결하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!