{"action":"closed","issue":{"url":"https://api.github.com/repos/rackt/react-router/issues/1673","labels_url":"https://api.github.com/repos/rackt/react-router/issues/1673/labels{/name}","comments_url":"https://api.github.com/repos/rackt/react-router/issues/1673/comments","events_url":"https://api.github.com/repos/rackt/react-router/issues/1673/events","html_url":"https://github.com/rackt/react-router/issues/1673","id":99459797,"number":1673,"title":"Animation problem when coding for ES6","user":{"login":"johnnyreilly","id":1010525,"avatar_url":"https://avatars.githubusercontent.com/u/1010525?v=3","gravatar_id":"","url":"https://api.github.com/users/johnnyreilly","html_url":"https://github.com/johnnyreilly","followers_url":"https://api.github.com/users/johnnyreilly/followers","following_url":"https://api.github.com/users/johnnyreilly/following{/other_user}","gists_url":"https://api.github.com/users/johnnyreilly/gists{/gist_id}","starred_url":"https://api.github.com/users/johnnyreilly/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/johnnyreilly/subscriptions","organizations_url":"https://api.github.com/users/johnnyreilly/orgs","repos_url":"https://api.github.com/users/johnnyreilly/repos","events_url":"https://api.github.com/users/johnnyreilly/events{/privacy}","received_events_url":"https://api.github.com/users/johnnyreilly/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":3,"created_at":"2015-08-06T15:13:27Z","updated_at":"2015-08-10T15:27:23Z","closed_at":"2015-08-10T15:27:23Z","body":"Hullo folks,\r\n\r\nThanks for your mighty fine router - it's been a joy to use!  I've just happened upon a slight problem when I've tried to use the animation features though. \r\n\r\nI'm using 0.13.3 versions of react and react-router and I'm writing using ES6 and compiling to ES5 using Babel.  I tried to take the [animation example](https://github.com/rackt/react-router/tree/0.13.x/examples/animations) and port that across to ES6.  \r\n\r\nI lifted the css `example` related classes wholesale and amended my own `App.js` as follows:\r\n\r\n```js\r\nimport React from 'react';\r\nimport TransitionGroup from 'react/lib/ReactCSSTransitionGroup';\r\nimport { RouteHandler } from 'react-router';\r\nimport ConnectionStateStore from '../stores/ConnectionStateStore';\r\nimport NavigationBar from './navigation/NavigationBar';\r\nimport Login from './login/Login';\r\n\r\nclass App extends React.Component {\r\n  constructor(props) {\r\n    super(props);\r\n    this._onChange = this._onChange.bind(this);\r\n    this.state = this._getStateFromStores();\r\n  }\r\n\r\n  componentWillMount() {\r\n    ConnectionStateStore.addChangeListener(this._onChange);\r\n  }\r\n\r\n  componentWillUnmount() {\r\n    ConnectionStateStore.removeChangeListener(this._onChange);\r\n  }\r\n\r\n  render() {\r\n    const { isLoggedIn } = this.state;\r\n    return (\r\n      <div>\r\n        <NavigationBar isLoggedIn={ isLoggedIn } />\r\n        <TransitionGroup component=\"div\" transitionName=\"example\">\r\n          { this._renderContent(isLoggedIn) }\r\n        </TransitionGroup>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  _renderContent(isLoggedIn) {\r\n    if (isLoggedIn) {\r\n      return <RouteHandler />;\r\n    }\r\n    return <Login />;\r\n  }\r\n\r\n  _onChange() {\r\n    this.setState(this._getStateFromStores());\r\n  }\r\n\r\n  _getStateFromStores() {\r\n    return ConnectionStateStore.getConnectionState();\r\n  }\r\n}\r\n\r\nApp.contextTypes = {\r\n  router: React.PropTypes.func.isRequired\r\n};\r\n\r\nexport default App;\r\n```\r\n\r\nHowever, I have no animation to show for my efforts and only this bitter, bitter message in the Chrome Dev Tools:\r\n\r\n> Uncaught Error: Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. This usually means that you're trying to add a ref to a component that doesn't have an owner (that is, was not created inside of another component's `render` method). Try rendering this component inside of a new top-level component which will hold the ref.\r\n\r\nIs there some special incantation required to use animation with React Router when coding ES6?  This feels like it ought to work... but it doesn't. Any help greatly appreciated."}}