CODEWITHSUNDEEP
reactjstypescriptreact-routerreact-router-dom
Tarang Hirani
Tarang Hirani

Reputation: 590

React router with typescript

I'm using react-router and react-router-dom with Typescript to build an application. I have defined my routes in this way (routes.tsx):

import * as React from 'react';
import createBrowserHistory from 'history/createBrowserHistory';
import { Router, Route, Switch } from 'react-router-dom';
import SignUp from '../routes/signup';

const history = createBrowserHistory();

const Routes: React.StatelessComponent<{}> = () => (
  <Router history={history}>
    <Switch>
      <Route exact path='/signup' component={SignUp} />
    </Switch>
  </Router>
);

export default Router;

I have a main App component that renders this Routes component:

import * as React from 'react';
import Routes from './routes';

const App: React.StatelessComponent<{}> = () => (
  <Routes />
);

export default App;

The compiler throws this error

(5,4): Type '{}' is not assignable to type 'Readonly<RouterProps>'.
  Property 'history' is missing in type '{}'.

I am new to TS so I am not sure what exactly is going on.

Upvotes: 2

Views: 5061

Answers (1)

Ian MacDonald
Ian MacDonald

Reputation: 14010

TypeScript, like most languages, expects a type specifier between < > markers on a class. This is indicating that the class is a generic that expects further definition.

I am not able to find specific documentation on this class that you're using, but I would guess something like this might help get you to the right place:

const App: React.StatelessComponent<RouterProps> = () => (
  <Routes />
);

Upvotes: 1

Related Questions