[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

@@ -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
 

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>
   )}/>
 );

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;

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;

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;