Question

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

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，et viola拉入了主分支，一切正常。版本0.13.3是我的版本，它引发了这个奇怪的错误。

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

神奇的话语。

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

1 个答案: