React-router transitionTo is not a function

Question

import React from 'react'; import { Router, Link, Navigation } from 'react-router'; export default class ResourceCard extends React.Component { render() { return ( <div onClick={this.routeHandler.bind(this)}> LINK </div> ); } routeHandler(){ this.transitionTo('someRoute', {objectId: 'asdf'}) } } 

I can not understand what happened? I get an error: Uncaught TypeError: this.transitionTo is not a function

I tried everything I found in the docs or in gitHub issues:

 this.transitionTo('someRoute', {objectId: 'asdf'}) this.context.transitionTo('someRoute', {objectId: 'asdf'}) this.context.route.transitionTo('someRoute', {objectId: 'asdf'}) etc. 

the route and parameter are correct, in this case it works fine:

 <Link to="'someRoute" params={{objectId: 'asdf}} 

ps reaction-router, reaction and other libraries updated

Answer 1

The Navigation component is a Mixin and must be appropriately added to the component. If you want to bypass Mixin (which, it seems to me, is directed towards the direction of the React-Router), you need to set contextTypes on the component as follows:

 var ResourceCard = React.createClass({ contextTypes: { router: React.PropTypes.func }, ... 

then you can call this.context.router.transitionTo .

Answer 2

This works with answer 0.14.2 and react router 1.0.3

 import React from 'react'; import { Router, Link } from 'react-router'; export default class ResourceCard extends React.Component { constructor(props,) { super(props); } render() { return ( <div onClick={this.routeHandler.bind(this)}> LINK </div> ); } routeHandler(){ this.props.history.pushState(null, '/'); } } 

Answer 3

Since there is currently no mixin support for ES6, you need to change a few things to make it work. router is a type of selection context, so you need to explicitly define contextTypes for the class. Then in your constructor you need to pass context and props to the superclass. And when calling the transition, you have to use this.context.router.transitionTo . and you do not need to import Navigation .

 import React from 'react'; import { Router, Link } from 'react-router'; export default class ResourceCard extends React.Component { constructor(props, context) { super(props, context); } render() { return ( <div onClick={this.routeHandler.bind(this)}> LINK </div> ); } routeHandler(){ this.context.router.transitionTo('someRoute', {objectId: 'asdf'}) } } ResourceCard.contextTypes = { router: function contextType() { return React.PropTypes.func.isRequired; } };