错误：不变违反：使用react-router时addComponentAsRefTo

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

TaskView：

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

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

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

神奇的话。