fix(react-router): match is only null for function child (#31278)

* fix(react-router): match is only null for function child

* fix(react-router): explicitly export interface (strict-export-declare-modifiers)

types/react-router/index.d.ts

@@ -68,15 +68,24 @@ export interface StaticContext {
 export interface RouteComponentProps<Params extends { [K in keyof Params]?: string } = {}, C extends StaticContext = StaticContext, S = H.LocationState> {
   history: H.History;
   location: H.Location<S>;
-  match: match<Params> | null;
+  match: match<Params>;
   staticContext?: C;
 }
 
+export interface RouteChildrenProps<
+  Params extends { [K in keyof Params]?: string } = {},
+  S = H.LocationState
+> {
+  history: H.History;
+  location: H.Location<S>;
+  match: match<Params> | null;
+}
+
 export interface RouteProps {
   location?: H.Location;
   component?: React.ComponentType<RouteComponentProps<any>> | React.ComponentType<any>;
   render?: ((props: RouteComponentProps<any>) => React.ReactNode);
-  children?: ((props: RouteComponentProps<any>) => React.ReactNode) | React.ReactNode;
+  children?: ((props: RouteChildrenProps<any>) => React.ReactNode) | React.ReactNode;
   path?: string | string[];
   exact?: boolean;
   sensitive?: boolean;

types/react-router/test/Children.tsx

@@ -20,3 +20,9 @@ function RouteWithElementJsxChildren() {
         {<div>Hello!</div>}
     </Route>;
 }
+
+function RouteWithFunctionChildrenUsingNullableMatch() {
+    return <Route path="/">
+        {({ match }) => match !== null ? <div>Matched path: {match.path}</div> : <div>No match!</div>}
+    </Route>;
+}

types/react-router/test/examples-from-react-router-website/Ambiguous.tsx

@@ -41,7 +41,7 @@ const AmbiguousExample = () => (
 
 const About = () => <h2>About</h2>;
 const Company = () => <h2>Company</h2>;
-const User: React.SFC<RouteComponentProps<{user: string}>> = ({ match }) => match && (
+const User: React.SFC<RouteComponentProps<{user: string}>> = ({ match }) => (
   <div>
     <h2>User: {match.params.user}</h2>
   </div>

types/react-router/test/examples-from-react-router-website/Animation.tsx

@@ -72,12 +72,12 @@ interface HSLParams {
   l: string;
 }
 
-const HSL: React.SFC<RouteComponentProps<HSLParams>> = ({ match }) => match && (
+const HSL: React.SFC<RouteComponentProps<HSLParams>> = ({ match: { params } }) => (
   <div style={{
     ...styles.fill,
     ...styles.hsl,
-    background: `hsl(${match.params.h}, ${match.params.s}%, ${match.params.l}%)`
-  }}>hsl({match.params.h}, {match.params.s}%, {match.params.l}%)</div>
+    background: `hsl(${params.h}, ${params.s}%, ${params.l}%)`
+  }}>hsl({params.h}, {params.s}%, {params.l}%)</div>
 );
 
 const styles: any = {};

types/react-router/test/examples-from-react-router-website/Basic.tsx

@@ -36,7 +36,7 @@ const About = () => (
   </div>
 );
 
-const Topics: React.SFC<RouteComponentProps> = ({ match }) => match === null ? null : (
+const Topics: React.SFC<RouteComponentProps> = ({ match }) => (
   <div>
     <h2>Topics</h2>
     <ul>
@@ -64,7 +64,7 @@ const Topics: React.SFC<RouteComponentProps> = ({ match }) => match === null ? n
   </div>
 );
 
-const Topic: React.SFC<RouteComponentProps<{topicId: string}>> = ({ match }) => match && (
+const Topic: React.SFC<RouteComponentProps<{topicId: string}>> = ({ match }) => (
   <div>
     <h3>{match.params.topicId}</h3>
   </div>

types/react-router/test/examples-from-react-router-website/ModalGallery.tsx

@@ -114,10 +114,6 @@ const Gallery = () => (
 );
 
 const ImageView: React.SFC<RouteComponentProps<{ id: string }>> = ({ match }) => {
-  if (!match) {
-    return null;
-  }
-
   const image = IMAGES[parseInt(match.params.id, 10)];
   if (!image) {
     return <div>Image not found</div>;
@@ -132,10 +128,6 @@ const ImageView: React.SFC<RouteComponentProps<{ id: string }>> = ({ match }) =>
 };
 
 const Modal: React.SFC<RouteComponentProps<{ id: string }>> = ({ match, history }) => {
-  if (!match) {
-    return null;
-  }
-
   const image = IMAGES[parseInt(match.params.id, 10)];
   if (!image) {
     return null;

types/react-router/test/examples-from-react-router-website/Params.tsx

@@ -22,7 +22,7 @@ const ParamsExample = () => (
   </Router>
 );
 
-const Child: React.SFC<RouteComponentProps<{id: string}>> = ({ match }) => match && (
+const Child: React.SFC<RouteComponentProps<{id: string}>> = ({ match }) => (
   <div>
     <h3>ID: {match.params.id}</h3>
   </div>

types/react-router/test/examples-from-react-router-website/Recursive.tsx

@@ -39,10 +39,6 @@ interface InitialPersonProps {
 type PersonProps = RouteComponentProps<{ id: string }>;
 
 const Person: React.SFC<InitialPersonProps | PersonProps> = ({ match }) => {
-  if (!match) {
-    return null;
-  }
-
   const person = find(match.params.id);
 
   return (