无法读取未定义的属性“推送"以获取反应使用历史记录 [英] Cannot read property 'push' of undefined for react use history

问题描述

我对 React 非常陌生，第一次尝试通过将其推送到历史记录来实现导航到新页面，但我遇到了这个错误 Cannot read property 'push'undefined for react use history 现在几个小时了，我想我需要一些帮助或指导.

这是我的小型 mvp 组件(我使用的是 Hooks):

import React, {useEffect, useState} from 'react';从react-router-dom"导入{BrowserRouter as Router, Route, Switch, useHistory};从./components/Report"导入报告；功能应用(){让历史 = useHistory();函数 handleClick() {history.push("/report");}返回 (<路由器><路由路径="/report";组件={报告}/><div><button onClick={handleClick}>点击我</button>

</路由器>);}导出默认应用

和

从反应"导入反应；从react-router-dom"导入{withRouter}；const 报告 = () =>{返回 (<div>来自报告的你好</div>);}导出默认 withRouter(Report)

非常感谢.

更新

codesandbox.io/s/crazy-hill-1i6gb
我已经在上面的链接上添加了我的完整代码.url 现在改变了，不再出现未定义的错误，按照 @Abir answer 但点击我按钮仍然显示而不是报告组件的文本.

解决方案

问题是因为您的路由器组件嵌套在您的 App 组件内，而不是您的应用程序嵌套在您的路由器内.路由器充当某种上下文提供程序，如果您的应用没有嵌套在路由器中，则 useHistory() 钩子没有提供程序可以从中获取历史记录.

你可以试试这样的:

import React, {useEffect, useState} from 'react';从react-router-dom"导入{BrowserRouter as Router, Route, Switch, useHistory};从./components/Report"导入报告；功能内容(){让历史 = useHistory();函数 handleClick() {history.push("/report");}返回 (<div><button onClick={handleClick}>点击我</button>

)}功能应用(){返回 (<路由器><路由路径="/report";组件={报告}/><内容/></路由器>);}导出默认应用

I'm very new to React and first time time trying to implement navigation to a new page by pushing it to the history but am stuck on this error Cannot read property 'push' of undefined for react use history for a couple of hours now and think I need some help or guidance please.

Here are my small mvp components (I'm using 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)

Thank you very much.

Update

codesandbox.io/s/crazy-hill-1i6gb
I've added my complete code on the above link. The url now changes and no longer get the undefined error as per @Abir answer but the click me button still shows up rather than the text for the Report component.

解决方案

The issue is because your Router component is nested inside of your App component rather than your App being nested inside of your router. The router acts as sort of a context provider and without your app being nested in the router the useHistory() hook has no provider to get the History from.

You can try something like this:

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

这篇关于无法读取未定义的属性“推送"以获取反应使用历史记录的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！