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

Posted 2023-02-21

【中文标题】无法读取未定义的属性“推送”以进行反应使用历史[重复]

【英文标题】：Cannot read property 'push' of undefined for react use history [duplicate]

【发布时间】：2020-12-24 22:48:13

【问题描述】：

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

【问题讨论】：

这能回答你的问题吗？ Uncaught TypeError: Cannot read property 'push' of undefined (React-Router-Dom)

您好，感谢您的快速回复。此刻，我实际上已经经历了很多问题和答案，这也是。它似乎要求我在我试图导航到的组件上使用 withRouter，但我有这个，所以不确定我还可能缺少什么。

你能分享一下codeandbox链接吗？调试和理解根本问题会更容易。

嗨，这两个类是我的全部。

这里的问题是在<Router />之外使用钩子useHistory，要解决这个问题，您只需将它们全部移动到<Route />的组件中

【参考方案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

【讨论】：

嗨，谢谢你的要点。是的，这会在按钮下方打开组件。我实际上是想把它放在它自己的页面下，但我可能在这里错过了一些概念上的理解。

@FrancislainyCampos 那么你会像所有其他页面一样让它成为一条路线 (<Route path="/" component=Content />)

codesandbox.io/s/crazy-hill-1i6gb

我已经在上面的链接中添加了我的完整代码。 url 发生了变化，但仍然显示 click me 按钮，而不是 Report 组件的文本。

那是因为你删除了“/report”路径的

【参考方案2】：

根据接受答案下的 cmets，这里是解决问题的全部要点。

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;

【讨论】：

我想补充一点，您不需要使用withRouter 包装您的报表组件导出。原因是您没有在 Report 组件内部执行任何需要接收路由器作为属性的操作。

酷，感谢您强调这一点。