Flow-typed: `[email protected]` wrong definition of `withRouter`

[oriSomething]

withRouter currently:

declare export function withRouter<P, S>(Component: ClassComponent<void, P, S> | FunctionComponent<P>): ClassComponent<void, $Diff<P, ContextRouter>, S>;

It should return FunctionComponent instead of ClassComponent (as you can see here)

[colin-han]

Hi, all,

Current version of react-router_v4.x.x (with flow-bin v0.59.0) has similar issue. Correct define should be as following:

declare export function withRouter<P>(
    Component: React$ComponentType<{| ...ContextRouter, ...P |}>
  ): React$ComponentType<$Diff<P, ContextRouter>>;

Otherwise, if I define nullable property to a ReactComponent like following. I will got an error if we not assign value to the prop.

// @flow
import React from 'react';
import { withRouter } from 'react-router';
import type { Location } from 'react-router';

type HeaderProps = {
  shown?: boolean, // Show error for this line is use this component like <Header />
  location: Location,
}

class Header extends React.Component<HeaderProps> {
  render() {
    return (
        <div>
          {this.props.shown &&
          <div>${JSON.stringify(this.props.location.pathname)}</div>}
        </div>
    );
  }
}

export default withRouter(Header);

[oskarkook]

Using $Diff<> fails this test: https://github.com/flowtype/flow-typed/blob/master/definitions/npm/react-router_v4.x.x/flow_v0.53.x-/test_react-router.js#L143

However, the current behaviour is definitely not correct either.

[colin-han]

Oh, no...
I don't know how to fix it correctly. flow is so complex.
Seem priority of your case is litter lower than mine. anyway, I will use it as a workaround in my project. Hope you can find correct way to fix it.

Thanks.

[omeid]

Related flowtype/flow-typed#1868