Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using react-router with typescript

I'm attempting to port a small react app over to typescript.

I'm encountering issues with react-router. I have the latest definitions from definitely type but the following code gives me errors:

var routes:Router.Route = (
<Route name="root" path="/" handler={MyApp}>
  <Route path="dashboard" handler={MyDash} />
  <DefaultRoute handler={SomeSection} />
  <NotFoundRoute handler={NotFoundPage} />
</Route>
);

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

These are the compilation errors I get:

js/app.tsx(31,3): error TS2605: JSX element type 'Component<RouteProp, any>' is not a constructor function for JSX elements.
  Property 'render' is missing in type 'Component<RouteProp, any>'.
js/app.tsx(32,5): error TS2605: JSX element type 'Component<RouteProp, any>' is not a constructor function for JSX elements.
js/app.tsx(47,5): error TS2605: JSX element type 'Component<DefaultRouteProp, any>' is not a constructor function for JSX elements.
  Property 'render' is missing in type 'Component<DefaultRouteProp, any>'.
js/app.tsx(49,5): error TS2605: JSX element type 'Component<NotFoundRouteProp, any>' is not a constructor function for JSX elements.
  Property 'render' is missing in type 'Component<NotFoundRouteProp, any>'.
js/app.tsx(53,20): error TS2345: Argument of type '(Handler: Component<any, any>) => void' is not assignable to parameter of type '(Handler: RouteClass, state: RouterState) => void'.
  Types of parameters 'Handler' and 'Handler' are incompatible.
    Type 'Component<any, any>' is not assignable to type 'RouteClass'.
js/app.tsx(54,17): error TS2604: JSX element type 'Handler' does not have any construct or call signatures.

What is the correct way to initialize a set of react-router routes using typescript?

(I should clarify that I'm using a nightly typescript build which has support for JSX via the --jsx react flag

like image 569
theycallmemorty Avatar asked Jul 31 '15 13:07

theycallmemorty


People also ask

How do I import a router into TypeScript?

ts to use these routes : import express from 'express'; import dotenv from 'dotenv'; import { routes } from './routes'; const app = express(); dotenv. config(); // routes app. use('/', routes); // start the server app.

Is react router deprecated?

This feature has been deprecated because the new structure of Routes is that they should act like components, so you should take advantage of component lifecycle methods instead.


1 Answers

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.

like image 56
Ryan Cavanaugh Avatar answered Oct 09 '22 20:10

Ryan Cavanaugh