The Real "RouteWithProps" React Component in TypeScript Code Snippets

1-passing-props.tsx

<Route path="/monitor" component={props =>
  <App data={linksData} {…props} />
}>

2-desired-call.tsx

<RouteWithProps
  path="/account"
  component={AccountDetails}
  withProps={{ details: this.state.details }}
/>

3-sample-component-props.tsx

interface Props extends RouteComponentProps<{}> {
  details: AccountDetails
}

4-naive-routewithprops.tsx

interface RouteWithPropsProps<P> extends RouteProps {
  component: ComponentType<P>
  withProps: P
}

export const RouteWithRoute = <P extends object>({
  component: WrappedComponent,
  withProps,
  ...routeProps
}: RouteWithPropsProps<P>): ReactNode => {
  return (
    <Route
      {...routeProps}
      render={injectedProps => {
        return <WrappedComponent {...injectedProps} {...withProps} />
      }}
    />
  )
}

5-omit.tsx

type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>

6-final-routewithprops.tsx

type PropsRouteProps<P> = P extends RouteComponentProps<any>
  ? RouteProps & {
      component: ComponentType<P>
      withProps?: Omit<P, keyof RouteComponentProps<any>>
    }
  : never
export const PropsRoute = <P extends RouteComponentProps<any>>({
  component: WrappedComponent,
  withProps,
  ...routeProps
}: PropsRouteProps<P>): ReactElement<P> => {
  return (
    <Route
      {...routeProps}
      render={childProps => {
        return <WrappedComponent {...childProps} {...withProps} />
      }}
    />
  )
}

7-bonus.tsx

type PropsRouteProps<P> = P extends WithDataProps<any> & RouteComponentProps<any>
  ? RouteProps & {
      component: ComponentType<P>
      withProps?: Omit<P, keyof RouteComponentProps<any> | keyof WithDataProps<any>>
    }
  : P extends RouteComponentProps<any>
  ? RouteProps & {
      component: ComponentType<P>
      withProps?: Omit<P, keyof RouteComponentProps<any>>
    }
  : never