错误：不变违规：使用 react-router 时的 addComponentAsRefTo答案

【问题标题】：Error: Invariant Violation: addComponentAsRefTo when using react-router错误：不变违规：使用 react-router 时的 addComponentAsRefTo
【发布时间】：2015-08-07 08:50:37
【问题描述】：

我刚开始使用 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

任务视图：

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。

【问题讨论】：

routes中require语句末尾的感叹号是什么？
在System.js中导入非.js文件就是这样。

标签： javascript reactjs ecmascript-6 react-router

【解决方案1】：

事实证明，我有一个错误版本的 React-router。我用 JSPM 等中提琴拉入主分支，一切正常。我的版本是 0.13.3，它抛出了这个奇怪的错误。

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

神奇的词。

【讨论】：