From 2707abc38abe6b7d9ddd6b27dbca14be7a3f3b02 Mon Sep 17 00:00:00 2001
From: Youen <neuoy@users.noreply.github.com>
Date: Wed, 24 Jan 2018 17:16:00 +0100
Subject: [PATCH] [react-router] added possibility to specify component props
 in route definitions, and to specify the type of this.props.route.props when
 implementing such a component (#22954)

* [react-router] fixed lint error due to implicit any in CustomLink test

* [react-router] added possibility to specify component props in route definitions, and to specify the type of this.props.route.props when implementing such a component

Example:

/* component definition */
interface Props { foo: string }
class MyComponent extends React.Component<RouteComponentProps<void,void,Props>, State> {
    /* here you can use this.props.route.props.foo */
}

/* route configuration */
<Route path="/my-path" component={MyComponent} props={{ foo: 'bar' }}>

* - fixed lint errors related to T[] instead of Array<T>
- added default type for ComponentProps in RouteComponentProps<P,R,ComponentProps>, so that it stays compatible with existing code

* [react-router] added default route props type (any) so that this new feature is fully backward compatible

* [react-router] fixed lint errors (T[] instead of Array<T> for non-generic types)
---
 types/react-router/index.d.ts                               | 1 +
 .../test/examples-from-react-router-website/CustomLink.tsx  | 6 +++---
 types/react-router/v3/lib/IndexRoute.d.ts                   | 3 ++-
 types/react-router/v3/lib/Route.d.ts                        | 4 ++--
 types/react-router/v3/lib/Router.d.ts                       | 4 ++--
 5 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/types/react-router/index.d.ts b/types/react-router/index.d.ts
index cf5efbbb36..1bebd855f1 100644
--- a/types/react-router/index.d.ts
+++ b/types/react-router/index.d.ts
@@ -14,6 +14,7 @@
 //                 Jérémy Fauvel <https://github.com/grmiade>
 //                 Daniel Roth <https://github.com/DaIgeb>
 //                 Egor Shulga <https://github.com/egorshulga>
+//                 Youen Toupin <https://github.com/neuoy>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.4
 
diff --git a/types/react-router/test/examples-from-react-router-website/CustomLink.tsx b/types/react-router/test/examples-from-react-router-website/CustomLink.tsx
index f3b1fb180e..ef5173e97e 100644
--- a/types/react-router/test/examples-from-react-router-website/CustomLink.tsx
+++ b/types/react-router/test/examples-from-react-router-website/CustomLink.tsx
@@ -24,9 +24,9 @@ interface OldSchoolMenuLinkProps extends LinkProps {
 }
 
 const OldSchoolMenuLink: React.SFC<OldSchoolMenuLinkProps> = ({ label, to, activeOnlyWhenExact }) => (
-  <Route path={to as string} exact={activeOnlyWhenExact} children={({ match }) => (
-    <div className={match ? 'active' : ''}>
-      {match ? '> ' : ''}<Link to={to}>{label}</Link>
+  <Route path={to as string} exact={activeOnlyWhenExact} children={(params: { match: boolean }) => (
+    <div className={params.match ? 'active' : ''}>
+      {params.match ? '> ' : ''}<Link to={to}>{label}</Link>
     </div>
   )}/>
 );
diff --git a/types/react-router/v3/lib/IndexRoute.d.ts b/types/react-router/v3/lib/IndexRoute.d.ts
index 9c82775c12..1132713b1a 100644
--- a/types/react-router/v3/lib/IndexRoute.d.ts
+++ b/types/react-router/v3/lib/IndexRoute.d.ts
@@ -12,9 +12,10 @@ import {
 type ComponentCallback = (err: any, component: RouteComponent) => any;
 type ComponentsCallback = (err: any, components: RouteComponents) => any;
 
-export interface IndexRouteProps {
+export interface IndexRouteProps<Props = any> {
     component?: RouteComponent;
     components?: RouteComponents;
+    props?: Props;
     getComponent?(nextState: RouterState, callback: ComponentCallback): void;
     getComponents?(nextState: RouterState, callback: ComponentsCallback): void;
     onEnter?: EnterHook;
diff --git a/types/react-router/v3/lib/Route.d.ts b/types/react-router/v3/lib/Route.d.ts
index 15aafebc75..a9ca90b42a 100644
--- a/types/react-router/v3/lib/Route.d.ts
+++ b/types/react-router/v3/lib/Route.d.ts
@@ -11,7 +11,7 @@ import {
 } from "react-router";
 import { IndexRouteProps } from "react-router/lib/IndexRoute";
 
-export interface RouteProps extends IndexRouteProps {
+export interface RouteProps<Props = any> extends IndexRouteProps<Props> {
     path?: RoutePattern;
 }
 
@@ -23,7 +23,7 @@ export default Route;
 type RouteCallback = (err: any, route: PlainRoute) => void;
 type RoutesCallback = (err: any, routesArray: PlainRoute[]) => void;
 
-export interface PlainRoute extends RouteProps {
+export interface PlainRoute<Props = any> extends RouteProps<Props> {
     childRoutes?: PlainRoute[];
     getChildRoutes?(partialNextState: LocationState, callback: RoutesCallback): void;
     indexRoute?: PlainRoute;
diff --git a/types/react-router/v3/lib/Router.d.ts b/types/react-router/v3/lib/Router.d.ts
index 02550026b9..55072a140e 100644
--- a/types/react-router/v3/lib/Router.d.ts
+++ b/types/react-router/v3/lib/Router.d.ts
@@ -66,10 +66,10 @@ export interface InjectedRouter {
     isActive: ActiveFunction;
 }
 
-export interface RouteComponentProps<P, R> {
+export interface RouteComponentProps<P, R, ComponentProps = any> {
     location: Location;
     params: P & R;
-    route: PlainRoute;
+    route: PlainRoute<ComponentProps>;
     router: InjectedRouter;
     routes: PlainRoute[];
     routeParams: R;