fix withRouter types

src/common/types.ts

@@ -110,12 +110,16 @@ export type RouterStoreContext = {
   location: Location;
 };
 
+type RouteComponentProps = Partial<RouteContext> & {
+  [k: string]: any;
+};
+
 export type Route = {
   path: string;
   exact?: boolean;
 
   /** The component to render on match, typed explicitly */
-  component: ComponentType<RouteContext>;
+  component: ComponentType<RouteComponentProps> | ComponentType<any>;
 
   /** If present, must return true to include the route. */
   enabled?: () => boolean;

src/controllers/index.ts

@@ -4,7 +4,7 @@ export { MemoryRouter } from './memory-router';
 export { StaticRouter } from './static-router';
 export { RouterActions } from './router-actions';
 export { Redirect } from './redirect';
-export { withRouter } from './with-router';
+export { withRouter, WithRouterProps } from './with-router';
 export { useResource, useRouter, useRouterActions } from './hooks';
 export { useResourceStoreContext } from './resource-store';
 export { createResource } from './resource-utils';

src/controllers/with-router/index.tsx

@@ -1,10 +1,14 @@
 import React, { ComponentType } from 'react';
 
 import { BrowserHistory, RouteContext } from '../../common/types';
+import { RouterActionPush, RouterActionReplace } from '../router-store/types';
 import { RouterSubscriber } from '../subscribers/route';
 
-// TODO
-type WithRouter = RouteContext & { history: BrowserHistory };
+export type WithRouterProps = RouteContext & {
+  history: BrowserHistory;
+  push: RouterActionPush;
+  replace: RouterActionReplace;
+};
 
 const getWrappedComponentDisplayName = (
   component: ComponentType<any>
@@ -23,20 +27,20 @@ const getWrappedComponentDisplayName = (
   return `withRouter(${componentDisplayName})`;
 };
 
-export const withRouter = <P extends Record<string, any>>(
+export const withRouter = <P extends Record<string, any> = {}>(
   WrappedComponent: ComponentType<P>
-) => {
+): ComponentType<Omit<P, keyof WithRouterProps>> => {
   const displayName = getWrappedComponentDisplayName(WrappedComponent);
-  const Component = WrappedComponent as ComponentType<WithRouter & P>;
-  const ComponentWithRouter = (props: P) => (
+  const Component = WrappedComponent;
+  const ComponentWithRouter = (unknownProps: any) => (
     <RouterSubscriber>
       {(
         // @ts-ignore access private `history` store property
         { route, location, query, match, action, history },
         { push, replace }
       ) => (
         <Component
-          {...props}
+          {...unknownProps}
           route={route}
           location={location}
           query={query}

src/index.ts

@@ -7,6 +7,7 @@ export {
   Redirect,
   RouterActions,
   withRouter,
+  WithRouterProps,
   ResourceSubscriber,
   useResource,
   useRouter,