ReactRouter 2.0.1上下文缺少链接

ReactRouter 2.0.1 context missing with links

本文关键字:链接 上下文 ReactRouter      更新时间:2023-09-26

我正在使用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);

知道我缺了什么吗?

编辑:要找到完整的示例,您可以克隆此要点

this.context.router.push是失败的函数。

因此,要么没有在上下文对象上设置router属性,要么没有传递上下文。。。。

我看到您将链接组件作为路由器组件的对等(而不是子)。

上下文(https://facebook.github.io/react/docs/context.html)是通过组件树传递的,我猜因为链接在组件树之外,所以它们无法找到合适的上下文。

尝试重写应用程序组件树