"TypeError: 정의되지 않은 속성을 읽을 수 없습니다('push 읽기'). 제출 버튼 클릭과 같은 사용자 작업 후에 리디렉션을 시도할 때 ')'가 발생합니다. 이는 리디렉션에 사용된 탐색 속성이 정의되지 않았음을 나타냅니다.
함수 구성 요소 내에서 탐색하려면 useNavigate 후크를 사용하세요. 이 후크는 기능 컴포넌트에만 호환됩니다.
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);
이전 버전의 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!