I have a project which uses Flow for static typing, and Reach Router for routing. Reach Router uses Route components to assign components to URLs:

<Router>
  <Component path="/somewhere" />
  <AnotherComponent path="/somewhere-else" />
  <YetAnotherComponent default />
</Router>

So if you browse to /somewhere-else, <AnotherComponent /> will be rendered. So far, so good. However, if one of these components doesn’t accept any props, Flow will complain:

export const AnotherComponent = () => {
  return <>I am another component.</>;
};

Error:(116, 10) Cannot create AnotherComponent element because property path is missing in function type [1] but exists in props [2].

To work around that, I created a Route component and a DefaultRoute component:

// @flow

import type { DefaultRouteProps, RouteProps } from "@reach/router";
import * as React from "react";

type RouteComponentProps = RouteProps & {
  component: React$ComponentType<*>,
};

type DefaultRouteComponentProps = DefaultRouteProps & {
  component: React$ComponentType<*>,
};

export const Route = (props: RouteComponentProps) => (
  <props.component {...props} />
);

export const DefaultRoute = (props: DefaultRouteComponentProps) => (
  <props.component {...props} />
);

(Note the imported types are pulled from flow-typed‘s Reach Router definition).

They’re used like so:

<Router>
  <Route component={Component} path="/somewhere" />
  <Route component={AnotherComponent} path="/somewhere-else" />
  <DefaultRoute component={YetAnotherComponent} default />
</Router>

(And yes, eventually we’ll likely migrate this project to React Router.)