Definitelytyped: @types/react-router Route produces errors with TS 2.6

[felixfbecker]

If you know how to fix the issue, make a pull request instead.

• [x] I tried using the @types/xxxx package and had problems.
• [x] I tried using the latest stable version of tsc. https://www.npmjs.com/package/typescript
• [x] I have a question that is inappropriate for StackOverflow. (Please ask any appropriate questions there).
• [x] [Mention](https://github.com/blog/821-mention-somebody-they-re-notified) the authors (see Definitions by: in index.d.ts) so they can respond.
  Authors:
  @sergey-buturlakin
  @mrk21
  @vasek17
  @ngbrown
  @awendland
  @KostyaEsmukov
  @johnnyreilly
  @LKay
  @DovydasNavickas
  @tkrotoff
  @huy-nguyen
  @grmiade
  @DaIgeb
  @egorshulga

If you do not mention the authors the issue will be ignored.

After updating to TS2.6, many of our route declarations are failing for reasons that are unclear to me:

<Route path="/" component={UserProfilePage} />

interface Props extends RouteComponentProps<any> {}
class UserProfilePage extends React.Component<Props, {}> {}



md5-24c2940d66f2a9e7d825153e5e37e2c6



(48,32): error TS2322: Type '{ path: string; component: typeof UserProfilePage; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Route> & Readonly<{ children?: ReactNode; }> & Rea...'.
  Type '{ path: string; exact: true; component: typeof UserProfilePage; }' is not assignable to type 'Readonly<RouteProps>'.
    Types of property 'component' are incompatible.
      Type 'typeof UserProfilePage' is not assignable to type 'ComponentClass<RouteComponentProps<any>> | StatelessComponent<RouteComponentProps<any>> | Compone...'.
        Type 'typeof UserProfilePage' is not assignable to type 'StatelessComponent<{}>'.
          Type 'typeof UserProfilePage' provides no match for the signature '(props: { children?: ReactNode; }, context?: any): ReactElement<any> | null'.

[Lodin]

@felixfbecker You forgot to extend React.Component, as I can see. Your code with extending works well for me. You can also use StatelessComponent, it works as well.

[felixfbecker]

Sorry, I copied the code wrong. I am extending React.Component.

[stevematdavies]

I have a similar setup but the exact attribute on a switched route is throwing a TS lint error,

'[tslint] Value must be set for boolean attributes (jsx-boolean-value)

<Route exact path="/" render={() => <Redirect to="/login"/>}/>

[Rendalf]

Seems like issue in that line:
https://github.com/DefinitelyTyped/DefinitelyTyped/blob/779a35bfdb7b77d07ee260eb95c6b48b5040dd91/types/react/index.d.ts#L322

I reckon StatelessComponent should return ReactNode as ComponentClass does https://github.com/DefinitelyTyped/DefinitelyTyped/blob/779a35bfdb7b77d07ee260eb95c6b48b5040dd91/types/react/index.d.ts#L289

I suppose https://github.com/DefinitelyTyped/DefinitelyTyped/issues/21746 has the same issue.

[swalladge]

I'm getting the same error as @stevematdavies - it seems to be from the use of exact in the Route definition.

Can be fixed by following https://stackoverflow.com/a/43327647 (exact --> exact={true}), or perhaps the error can be suppressed with ts config?

[lyphtec]

@stevematdavies & @swalladge : This is due to this rule --> https://github.com/palantir/tslint-react/blob/master/src/rules/jsxBooleanValueRule.ts

You just need to add this to your tslint.json to suppress it:

"jsx-boolean-value": false

[Sword-Smith]

I had the same issue but I had no explicitly defined boolean variables in my code. Running tslint --fix [filename] fixed the issue for me. It was some HTML parameters whose attributes were not set to a boolean value.

[hgouveia]

I have a similar setup but the exact attribute on a switched route is throwing a TS lint error,

'[tslint] Value must be set for boolean attributes (jsx-boolean-value)

<Route exact path="/" render={() => <Redirect to="/login"/>}/>

i just had same issue, i solved adding exact={true}

<Route exact={true} path='/' component={LoginPage} />