我正在使用react-router
版本2.0.1
以及以下文件:
import React, {Component} from 'react'
import {render} from 'react-dom'
import {Link, Router, Route, browserHistory} from 'react-router'
class Home extends Component {
render() {
return (
<div>
<h1>Home</h1>
</div>
)
}
}
class About extends Component {
render() {
return (
<div>
<h1>About</h1>
</div>
)
}
}
class Contact extends Component {
render() {
return (
<div>
<h1>Contact</h1>
</div>
)
}
}
render(
<section>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
<Link to="/contact">Contact</Link>
<Router history={browserHistory}>
<Route path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Router>,
</section>,
document.querySelector('main')
)
当我点击其中一个链接时,我得到:
ReactErrorUtils.js:71 Uncaught TypeError: Cannot read property 'push' of undefined
handleClick @ Link.js:124
ReactErrorUtils.invokeGuardedCallback @ ReactErrorUtils.js:71
executeDispatch @ EventPluginUtils.js:79
executeDispatchesInOrder @ EventPluginUtils.js:102
executeDispatchesAndRelease @ EventPluginHub.js:43
executeDispatchesAndReleaseTopLevel @ EventPluginHub.js:54
forEachAccumulated @ forEachAccumulated.js:23
processEventQueue @ EventPluginHub.js:259
runEventQueueInBatch @ ReactEventEmitterMixin.js:18
handleTopLevel @ ReactEventEmitterMixin.js:34
handleTopLevelWithoutPath @ ReactEventListener.js:93
handleTopLevelImpl @ ReactEventListener.js:73
perform @ Transaction.js:136
batchedUpdates @ ReactDefaultBatchingStrategy.js:62
batchedUpdates @ ReactUpdates.js:94
dispatchEvent @ ReactEventListener.js:204
Link.js:124
:
this.context.router.push(_location);
知道我缺少什么吗?
修改:要查找完整示例,您可以克隆此gist
答案 0 :(得分:1)
this.context.router.push是失败的函数。
因此,没有在上下文对象上设置router属性,或者没有传递上下文....
我看到你把Link组件作为Router组件的对等体(而不是子对象)。
context(https://facebook.github.io/react/docs/context.html)在组件树下传递,我猜测因为Links在那之外,他们无法找到合适的上下文。
尝试重写应用程序组件树