Javascript React browserHistory.push给出未捕获的类型错误：无法读取属性'；推动'；未定义的

我试图在单击时更改页面。 这里是点击功能

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>)
}
}

import React，{Component}来自'React'；
从“react Router dom”导入{BrowserRouter as Router，Route}；
从“react router”导入{browserHistory}；
类按钮扩展组件{
skipClick（）{
browserHistory.push（'/sessionstate2'）；
}
render（）{
返回（跳过）
}
}

和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')
 );

从“react router”导入浏览器历史记录；
ReactDOM.render(
,
document.getElementById（'root'））
);

它是给予

未捕获的TypeError:无法读取未定义的属性“push”

---

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

这里有一个可重复的示例，说明如何在react router 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

---

如果导航到localhost:3000，然后单击“关于”，您将看到按钮组件。单击它将以编程方式将路由更改为

/new location

以下是一个可复制的示例，说明如何在react router 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

---

如果导航到localhost:3000，然后单击“关于”，您将看到按钮组件。单击它将以编程方式将路由更改为

/new location

您不再需要使用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');
}

---

您不再需要使用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');
}

---

您需要向试图从中访问路由器的组件提供路由器上下文。这可能因您使用的RR版本而异。您能否尝试将路由器中的导入更改为：

import{browserHistory}from'react router'@duhaime执行了dat，但仍然不工作。您使用的是哪个版本的react路由器？较新的版本应该在index.js中的“react Router”中使用类似“import{browserHistory，Router}”的内容。另外，您是否使用react路由器dom？如果不是，我会删除它以简化…不确定，但在绑定
onClick
事件后尝试，您正在使用es6，因此可能是因为面临的问题，请尝试以下操作：
onClick={this.skipClick.bind（this）}
。您需要为尝试从中访问路由器的组件提供路由器上下文。这可能因您使用的RR版本而异。您能否尝试将路由器中的导入更改为：
import{browserHistory}from'react router'@duhaime执行了dat，但仍然不工作。您使用的是哪个版本的react路由器？较新的版本应该在index.js中的“react Router”中使用类似“import{browserHistory，Router}”的内容。另外，您是否使用react路由器dom？如果不是，我会删除它以简化…不确定，但在绑定
onClick
事件后尝试，您正在使用es6，因此可能是因为面临这个问题，请尝试以下操作：
onClick={this.skipClick.bind（this）}
。我很高兴听到这个消息！请随意点击绿色复选框“接受”这个答案：）我很高兴听到它！请随意单击绿色复选框“接受”此答案：）