대응 사용 기록에 대해 정의되지 않은 속성 '푸시'를 읽을 수 없음

대응 사용 기록에 대해 정의되지 않은 속성 '푸시'를 읽을 수 없음

이 질문은 이미 다음과 같은 해답을 가지고 있다.

반응 라우터:useHistory는 왜 정의되지 않은 반응인가? (1개 답변)

닫힌1년 전.

나는 Reaction을 처음 접하고 새로운 페이지에 대한 탐색을 역사로 밀어넣어 실행하려고 하지만 이 오류에 사로잡혀 있다.Cannot read property 'push' of undefined for react use history지금 몇 시간째인데 도움이 필요하거나 안내가 필요할 것 같아.

다음은 나의 작은 MVP 구성품(Hooks 사용)이다.

import React, {useEffect, useState} from 'react';
import {BrowserRouter as Router, Route, Switch, useHistory} from "react-router-dom";
import Report from "./components/Report";

function App() {

let history = useHistory();

function handleClick() {
    history.push("/report");
}

return (
    <Router>
        <Route path="/report" component={Report}/>
        <div>
            <button onClick={handleClick}>Click me</button>
        </div>

    </Router>
);
}

export default App

그리고

import React from "react";
import {withRouter} from "react-router-dom";

const Report = () => {

return (
    <div>Hello from report</div>
);

}

export default withRouter(Report)

정말 감사합니다.

갱신하다

codesandbox.io/s/crazy-hill-1i6gb
위 링크에 내 전체 코드를 추가했어.이제 URL이 변경되어 @Abir 응답에 따라 정의되지 않은 오류를 더 이상 얻을 수 없지만 보고서 구성 요소의 텍스트 대신 클릭 미 버튼이 여전히 나타난다.

문제는 라우터 구성요소가 내포되어 있기 때문이다.App라우터 내부에 중첩되는 앱이 아닌 구성요소.라우터는 일종의 컨텍스트 제공자 역할을 하며, 당신의 앱이 라우터에 중첩되지 않으면 useHistory() 후크에는 히스토리를 가져올 제공자가 없다.

이런 것을 시도해 볼 수 있다.

import React, {useEffect, useState} from 'react';
import {BrowserRouter as Router, Route, Switch, useHistory} from "react-router-dom";
import Report from "./components/Report";

function Content(){
    let history = useHistory();
    

    function handleClick() {
        history.push("/report");
    }
    
    return (
        <div>
            <button onClick={handleClick}>Click me</button>
        </div>
    )

}

function App() {

    return (
        <Router>
            <Route path="/report" component={Report}/>
            <Content />
        </Router>
    );
}

export default App

여기에 제시된 답변에 따르면, 이 문제를 해결하기 위해 무엇이 작용했는지에 대한 완전한 요지가 있다.

import React from "react";
import { BrowserRouter as Router, Route, useHistory } from "react-router-dom";
import Report from "./components/Report";

function Content() {
let history = useHistory();

function handleClick() {
 history.push("/report");
}

return (
 <div>
    <button onClick={handleClick}>Click me</button>
 </div>
 );
}

function App() {
return (
 <Router>
   <Route path="/report" exact component={Report} />
   <Route path="/" exact component={Content} />
 </Router>
);
}

export default App;

그리고

import React from "react";

const Report = () => {
return <div>Hello from report</div>;
};

export default Report;

참조URL: https://stackoverflow.com/questions/63761899/cannot-read-property-push-of-undefined-for-react-use-history