无法读取未定义的属性“推送”以获取反应使用历史记录

Question

我对 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

和

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 的回答那样出现未定义的错误，但单击我按钮仍然显示，而不是报告组件的文本。

Answer 1

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