react-router typescript navigation 0.13.3 - cannot read property 'router'

Question

I am trying to convert an existing react project over to typescript. Nearly everything is working fine, except for the Navigation mixin for react-router (version 0.13.3). I am currently getting an error that states "Cannot read property 'router' of undefined."

My main page code currently looks like this:

/// <reference path="../typings/react/react.d.ts" />
/// <reference path="../typings/react-router/react-router.d.ts" />

import React = require('react');
import ReactRouter = require('react-router');
import Header = require('./common/header.tsx');
var Navigation = ReactRouter.Navigation;

class Home extends React.Component<{}, {}> {
    static contextTypes: React.ValidationMap<any> = {
        router: React.PropTypes.func.isRequired
    };

    render(): JSX.Element {
        return (
            <div>
                <Header.Header MenuItems={[]}/>
                <div className="jumbotron">
                    <h1>Utility</h1>
                    <p>Click on one of the options below to get started...</p>
                    <a className="btn btn-lg" onClick={() => Navigation.transitionTo('Route1')}>Route1</a>
                    <a className="btn btn-lg" onClick={() => Navigation.transitionTo('Route2')}>Route2</a>
                    </div>
                </div>
        );
    }
}

export = Home;

score 2 · Answer 1 · edited May 23 '17 at 11:52

ReactRouter.Navigation is a mixin class - you are accessing it statically, which causes wrong scope.

You should change your code to something like this:

/// <reference path="../typings/react/react.d.ts" />
/// <reference path="../typings/react-router/react-router.d.ts" />

import React = require('react');
import ReactRouter = require('react-router');
import Header = require('./common/header.tsx');
var Navigation = ReactRouter.Navigation;

class Home extends React.Component<{}, {}> {
    static contextTypes: React.ValidationMap<any> = {
        router: React.PropTypes.func.isRequired
    };

    render(): JSX.Element {
        return (
            <div>
                <Header.Header MenuItems={[]}/>
                <div className="jumbotron">
                    <h1>Utility</h1>
                    <p>Click on one of the options below to get started...</p>
                    <a className="btn btn-lg" onClick={() => (<any>this.context).router.transitionTo('Route1')}>Route1</a>
                    <a className="btn btn-lg" onClick={() => (<any>this.context).router.transitionTo('Route2')}>Route2</a>
                    </div>
                </div>
        );
    }
}

export = Home;

This seems to be very similar question but for pure JavaScript.

BTW why are you using old TypeScript modules instead of ES6 modules supported in TS 1.6?

score 1 · Accepted Answer · answered Oct 05 '15 at 12:06

Thanks for your help. It worked to use this.context, however in order to make the TypeScript compiler happy, I needed to create a variable that was equal to this.context with the type of any. Here is what the render method looked like:

render(): JSX.Element {
    var myContext: any = this.context;
    return (
        <div>
            <Header.Header MenuItems={[]}/>
            <div className="jumbotron">
                <h1>Utility</h1>
                <p>Click on one of the options below to get started...</p>
                <a className="btn btn-lg" onClick={() => myContext.router.transitionTo('remoteaccess') }>Remote Access</a>
                <a className="btn btn-lg" onClick={() => myContext.router.transitionTo('bridge') }>Bridge</a>
            </div>
        </div>
    );
}

that's why I always "casted" it in handler functions - ```this.context```. Therefore my answer is equivalent to this... — ahz, Oct 29 '15 at 14:50

react-router typescript navigation 0.13.3 - cannot read property 'router'

2 Answers2