[英]FullCalendar on loading > Uncaught TypeError: Cannot read property 'push' of undefined
[英]React browserHistory.push giving Uncaught TypeError: Cannot read property 'push' of undefined
我正在尝试更改点击页面。 这是点击功能
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')
);
它给
未捕获的TypeError:无法读取未定义的属性“推”
你能告诉我我在做什么错吗?
这是如何在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
然后启动服务器:
npm run start
如果导航到localhost:3000,然后单击“关于”,您将看到按钮组件。 单击它会以编程方式将路线更改为/new-location
您不再需要使用browserHistory。 React-router-dom注入与组件路线相关的道具和环境。 这些道具之一是“历史记录”,在此历史记录对象上是一个功能推送,您可以调用该功能推送并传递要导航到的路线。
在Class基础组件中的示例中,您可以创建如下所示的函数作为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');
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.