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;
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>
);
}