React browserHistory.push 给出 Uncaught TypeError: Cannot read property 'push' of undefined答案

【问题标题】：React browserHistory.push giving Uncaught TypeError: Cannot read property 'push' of undefinedReact browserHistory.push 给出 Uncaught TypeError: Cannot read property 'push' of undefined
【发布时间】：2017-08-19 06:39:27
【问题描述】：

我正在尝试更改点击页面。这里是点击功能

import React, { Component } from 'react';
import {BrowserRouter as Router,Route} from 'react-router-dom';
import { browserHistory } from 'react-router';
class Buttons extends Component {
skipClick(){
    browserHistory.push('/sessionstate2');
}
render() {
return (<a className={skipShow} onClick={this.skipClick}>Skip</a>)
}
}

和 index.js

import browserHistory from 'react-router';
ReactDOM.render(
    <Router history={browserHistory}>
    <div>
      <Route exact path="/" component={App} />
      <Route exact path="/sessionstate1" component={Template1}/>
      <Route exact path="/sessionstate2" component={Template2}/>
      <Route exact path="/sessionstate3" component={Template3}/>
</div>
  </Router>,
   document.getElementById('root')
 );

它正在给予

未捕获的类型错误：无法读取未定义的属性“推送”

你能告诉我我在这里做错了什么吗？

【问题讨论】：

您需要将路由器上下文提供给您尝试从中访问路由器的组件。这可能会根据您使用的 RR 版本而有所不同。 stackoverflow.com/questions/39174814/…
您可以尝试将路由器中的导入更改为：import {browserHistory} from 'react-router';
@duhaime 做了 dat 但仍然无法正常工作
你用的是什么版本的 react-router？较新的版本应该在 index.js 中使用类似 `import {browserHistory, Router} from 'react-router' 的东西。另外，您是否使用 react-router-dom ？如果没有，我会删除它以简化...
不确定，但在绑定onClick 事件后尝试，您正在使用 es6，所以可能是因为面临的问题，试试这个：onClick={this.skipClick.bind(this)}。

标签： javascript reactjs react-router

【解决方案1】：

这是一个可重现的示例，说明如何在反应路由器 v4 中以编程方式更改路由。

首先，安装一个简单应用的样板：

sudo npm install -g create-react-app
create-react-app demo-app
cd demo-app
npm install react-router-dom

那我们把/src/App.js改成：

import React from 'react'
import {BrowserRouter as Router, Route, Link, withRouter} from 'react-router-dom'

const BasicExample = () => (
  <Router>
    <div>
      <li><Link to="/">Home</Link></li>
      <li><Link to="/about">About</Link></li>

      <Route exact path="/" component={Home}/>
      <Route path="/about" component={About}/>
    </div>
  </Router>
)

const Home = () => (
  <div>
    <h2>Home</h2>
  </div>
)

const Button = withRouter(({history}) => (
  <button type='button' onClick={() => { history.push('/new-location') }}>Click Me!</button>
))

const About = () => (
  <div>
    <h2>About</h2>
    <Button />
  </div>
)

export default BasicExample

然后启动你的服务器：

npm run start

如果您导航到 localhost:3000，然后单击 About，您将看到按钮组件。单击它将以编程方式将路由更改为/new-location

【讨论】：

我很高兴听到这个消息！随意点击绿色复选框“接受”这个答案:)

【解决方案2】：

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

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

redirectToSessionStatePage() {
 this.props.history.push('/sessionstate2'); OR
 this.context.router.history.push('/sessionstate2');
}

在函数基无状态组件中

redirectToSessionStatePage() {
 props.history.push('/sessionstate2'); OR
 context.router.history.push('/sessionstate2');
}

【讨论】：