javascript - 错误: Invariant Violation: addComponentAsRefTo when using react-router

Question

我刚刚开始使用 React 和 React-router，但立即遇到了障碍。到目前为止，我的项目非常简单。当我在 / 路由上的浏览器中加载我的“应用程序”时，出现以下错误:

Error: Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs.

尽管组件在浏览器中呈现，但 React 却崩溃了。

堆栈跟踪没有帮助，因为最后一个文件是我的 index.js 文件，它不包含 React 内容，它只启动一个类:

import App from './app/App'

(() => {
  let app = new App()
  app.boot()
})()

App.js 包含以下内容:

import React from 'react'
import Router from 'react-router'
import routes from '../routes'

class App {

  boot() {

    Router.run(routes, Router.HistoryLocation, (Root) => {
      React.render(<Root/>, document.getElementById('app'));
    })
  }
}

export default App

这是我的路线:

import React from 'react'
import Router from 'react-router'
let Route = Router.Route
let DefaultRoute = Router.DefaultRoute

import AppView from './ui/AppView.jsx!'
import TaskView from './ui/views/TaskView.jsx!'

let routes =
  <Route handler={AppView} path="/">
    <DefaultRoute handler={TaskView}/>
  </Route>

export default routes

AppView 和 TaskView 也非常简单:

import React from 'react'
import Router from 'react-router'

let RouteHandler = Router.RouteHandler

class AppView extends React.Component {

  constructor() {
    super()
    this.state = {}
  }

  render() {
    return <div className="app__frame">
      <h1>Planning app</h1>
      <RouteHandler />
    </div>
  }
}

export default AppView

任务 View :

import React from 'react'

class TaskView extends React.Component {

  render() {
    return <section className="task-view">
      <p>test</p>
    </section>
  }
}

export default TaskView

这就是全部内容了。如果我将 TaskView 路由设置为普通路由(而不是 DefaultRoute)，那么当我点击该路由时就会出错。这让我相信 TaskView 有一个错误，但很难找到，因为它太简单了。

这可能是一件愚蠢而简单的事情，但我不知何故错过了。但我无法弄清楚，所以需要帮助。谢谢!

对于工具，我使用 JSPM 和 Babel。

Answer 1

事实证明，我有一个有 bug 的 React-router 版本。我用 JSPM 等拉入了 master 分支，一切正常。我使用的是 0.13.3 版本，它引发了这个奇怪的错误。

jspm remove react-router
jspm install react-router=github:rackt/react-router@master

神奇的话语。