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't get it, what's wrong? I'm receiving an error: Uncaught TypeError: this.transitionTo is not a function

I've tried everything I've find in 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 the param is correct, it works fine in this case:

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

p.s. react-router, react and other libraries is up to date

score 4 · Answer 1 · answered Aug 21 '15 at 13:27

The Navigation component is a Mixin and needs to be added to the component accordingly. If you want to bypass the Mixin (which I feel is the direction React-Router is going) you need to set the contextTypes on the component like so:

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

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

score 2 · Answer 2 · answered Jan 08 '16 at 20:52

This works with react 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, '/');
    }
}

score 0 · Answer 3 · answered Oct 08 '15 at 06:57

0

As there's no mixin support for ES6 as of now , you need to change a few things to make it work .router is an opt-in context type so you will have to explicitly define contextTypes of the class . Then in your constructor You will have to pass context and props to super class. And while calling transitionTo you'll have to use this.context.router.transitionTo . and you don't 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;
  }
};

answered Oct 08 '15 at 06:57

sapy

8,952
7
49
60

I try your solution but still got `Uncaught TypeError: Cannot read property 'transitionTo' of undefined` – Kris MP Dec 15 '15 at 07:15
You are missing something . Can I look at your code ? – sapy Dec 15 '15 at 09:27
Please see my question http://stackoverflow.com/questions/34281070/react-redux-how-to-redirect-to-specific-page-using-react-router I have adjust it to your answer but still same error returned – Kris MP Dec 15 '15 at 09:39
NewStock.contextTypes declaration missing in your code , And I also see no constructor in your class. Please read my answer properly and It will definitely work. – sapy Dec 15 '15 at 13:04

React-router transitionTo is not a function

3 Answers3

Linked