錯誤：不變違反：使用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

神奇的話。