无法读取未定义的属性“push”以进行反应使用历史记录[重复]

我对 React 很陌生，第一次尝试实现导航到新页面通过将其推入历史记录但我陷入了这个错误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

And

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

const Report = () => {

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

}

export default withRouter(Report)

非常感谢。

Update

codesandbox.io/s/crazy-hill-1i6gb
我已在上面的链接中添加了完整的代码。 url 现在发生变化，不再出现未定义的错误@阿比尔回答但“单击我”按钮仍然显示，而不是“报告”组件的文本。

问题是因为您的 Router 组件嵌套在您的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