Using react-router with typescript

The root problem was some definitions in react-router not having an explicit render() method. This has been fixed (indirectly) by https://github.com/borisyankov/DefinitelyTyped/pull/5197

Note that this code is incorrect:

Router.run(routes, function (Handler:React.Component<any, any>) {  React.render(<Handler/>, document.body);});

It should be:

Router.run(routes, function (Handler: new() => React.Component<any, any>) {  React.render(<Handler/>, document.body);});

Because Handler is a constructor for a React component, not an instance of it.

Errors in the type definitions appears to be the cause. You can work around them by modifying the .d.ts files as follows:

In react.d.ts, remove render from the JSX.ElementClass interface

interface ElementClass extends React.Component<any, any> {}

In react-router.d.ts, change run method's routes parameter's type to React.ReactElement<RouteProp>

function run(routes: React.ReactElement<RouteProp>, callback: RouterRunCallback): Router;function run(routes: React.ReactElement<RouteProp>, location: LocationBase, callback: RouterRunCallback): Router;

For making it running under typescript 1.6 with react-router, I've added the following code in the react-router.d.ts file :

interface RouterClass extends React.ComponentClass<any> {}var Router: RouterClass;//For Routerfunction createElement(type: ReactRouter.RouterClass,props: any,...children: __React.ReactNode[]): ReactRouter.Router;}interface RouteProp {    name?: string;    path?: string;    handler?: React.ComponentClass<any>;    ignoreScrollBehavior?: boolean;    component?: React.ComponentClass<any>;}