reactjs - 无法读取未定义的属性推送

Posted 2023-02-21

【中文标题】reactjs - 无法读取未定义的属性推送

【英文标题】：reactjs - can not read property push of undefined

【发布时间】：2016-07-27 19:12:30

【问题描述】：

我有这个代码。我想要做的是，当我单击“功能”按钮时，它将带我索引路线。但是，React 一直说'can not read property push of undefined' 我做错了什么？

route.js

import React from "react";
import ReactDOM from "react-dom";
import Router, Route, hashHistory, IndexRoute  from "react-router";

import Layout from "./page/Layout";
import Features from "./page/Features";
import Features from "./page/archive";

const app = document.getElementById('app');

ReactDOM.render(
    <Router history=hashHistory>
        <Route path="/" component=Layout>
            <IndexRoute component=Features />
            <Route path="archive" component=Archive />
        </Route>
    </Router>, app);

布局组件

import React from "react";
import Link, Router, Route, hashHistory from "react-router";
export default class Layout extends React.Component
    navigate()
        this.context.router.push('/');
    
    render() 
        return(
            <div>
                this.props.children
                <button onClick=this.navigate.bind(this)>feature</button>
            </div>
        )
    

package.json - 部分

"react": "^0.14.7",
"react-dom": "^0.14.7",
"react-router": "^2.0.1"
 "history": "^2.0.1",

-------------更新乔丹的回答-------------

【问题讨论】：

希望这可能会有所帮助github.com/reactjs/react-router/issues/975

历史无法访问布局组件，像

【参考方案1】：

通常，当您尝试从嵌套组件重定向时，会出现此错误。

有几种方法可以解决它

使用 react-dom 你可以从 react-router-dom 导入 withRouter 组件，然后像往常一样使用 this.props.history.push ，而不是通常的导出默认 'class' 我们将使用 export default withRouter(class );并解决繁荣问题。

【参考方案2】：

从'react-router-dom'导入withRouter；

用Router(AppName)导出默认值；

【讨论】：

虽然这段代码 sn-p 可以解决问题，但including an explanation 确实有助于提高帖子的质量。请记住，您正在为将来的读者回答问题，而这些人可能不知道您的代码建议的原因。也请尽量不要用解释性的 cmets 挤满你的代码，这会降低代码和解释的可读性！

【参考方案3】：

使用 React 路由器 v4，您需要将组件包装在 withRouter 中。然后您可以访问组件中的历史记录。执行以下操作：

import  withRouter  from 'react-router-dom';
...
...
export default withRouter(MyComponent);

【讨论】：

如果你也使用 Redux，导出语句会是什么样子。是 export default connect(mapStateToProps, null)(withRouter(App)) 还是相反？谢谢！

【参考方案4】：

您不再需要使用 browserHistory。 React-router-dom 注入到你的组件路由相关的道具和上下文中。 其中一个道具是“历史”，在这个历史对象上是一个函数推送，您可以调用它并传递您想要导航到的路线。

类基础组件中的示例，您可以创建如下所示的函数作为 onClick 处理程序以重定向到特定链接

redirectToPage() 
 this.props.history.push('/page'); OR
 this.context.router.history.push('/page');

在函数基无状态组件中

redirectToSessionStatePage() 
 props.history.push('/page');OR
 context.router.history.push('/page');

【参考方案5】：

这可能不是指上面的例子，但我有同样的错误。经过大量调试后，我发现我的内部组件无法访问历史记录。确保您的历史记录是可访问的。

//main.js

<BrowserRouter>
    <div>
        <Route path="/" component=Home/>
        <Route path="/techMap" component=TechMap/>
    </div>
 </BrowserRouter>

//app.js

<div>
   <TechStack history= this.props.history/>
</div>

//techstack.js

<div>
    <span onClick=this.search.bind(this)>
    </span>
 </div>
)

search(e)
 this.props.history.push('/some_url');

TechStack 是我的内部组件。

之前我能够在 app.js 中获取历史记录，但在 tech.js 中却没有。 但是通过历史形式的 props 后，我得到了 tech.js 中的历史和路由工作

【参考方案6】：

在 React Router v4 中，您不再需要为您的路由器提供历史记录。相反，您只需使用来自“react-router-dom”的BrowserRouter 或HashRouter。但这使得当您不在反应组件中时如何将溃败推向您的历史记录变得不清楚。

解决方案是使用history 包。

只需像这样导入createHistory：

import createHistory from 'history/createBrowserHistory'

或者我的做法是这样的：

import  createHashHistory  from 'history'

然后创建您的历史记录

export const history = createHashHistory()

现在你可以推送它了：

history.push('/page')

我希望这可以帮助其他提出这个问题的人。目前的答案都没有给我我需要的东西。

【讨论】：

推送时如何刷新页面？

【参考方案7】：

您似乎用 /archives 目录中的任何内容覆盖了您的功能导入。在您发布的代码中，您有：

import Features from "./page/Features";
import Features from "./page/archive";

【参考方案8】：

export default class Layout extends React.Component

    navigate = () => 
        this.context.router.push('/');
    
    render() 
        return(
            <div>
                this.props.children
                <button onClick=this.navigate.bind(this)>feature</button>
            </div>
        )
    

Layout.contextTypes = 
    router: PropTypes.object.isRequired

【讨论】：

this.context 是空对象！

【参考方案9】：

更改布局组件以将导航分配给 ES6 lambda。这是设置 this 的正确值所需要的

import React from "react";
import Link, Router, Route, hashHistory from "react-router";
export default class Layout extends React.Component
    navigate = () => 
        this.context.router.push('/');
    

    render() 
      return(
        <div>
            this.props.children
            <button onClick=this.navigate.bind(this)>feature</button>
        </div>
      )
    

【讨论】：

当我点击功能时，我得到'无法获得未定义的属性推送'

【参考方案10】：

您需要将您的 route.js 页面更改为

import Router, browserHistory from 'react-router';

ReactDOM.render(
    <Router history=browserHistory>
        <Route path="/" component=Layout>
            <IndexRoute component=Features />
            <Route path="archive" component=Archive />
        </Route>
    </Router>, app);

然后你可以在任何你想导航的地方使用

 import Router, browserHistory from 'react-router';

 browserHistory.push('/');

react-router 文档鼓励您使用 browserHistory 而不是 hashHistory

hashHistory 使用 URL 哈希以及查询键来跟踪 状态。 hashHistory 不需要额外的服务器配置，但是 通常不如 browserHistory 受欢迎。

【参考方案11】：

我使用 browserHistory 而不是 HashHistory。 然后我只需要执行以下操作：

import  browserHistory  from 'react-router'
// ...
// ...

   navigate()
        browserHistory.push('/');