From 5bcb6eca220081d0cd6f81b29232956f969db8de Mon Sep 17 00:00:00 2001 From: Bradley Ayers Date: Wed, 12 Dec 2018 15:56:05 +1100 Subject: [PATCH] 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 | 13 +++++++++++-- types/react-router/test/Children.tsx | 6 ++++++ .../Ambiguous.tsx | 2 +- .../Animation.tsx | 6 +++--- .../examples-from-react-router-website/Basic.tsx | 4 ++-- .../ModalGallery.tsx | 8 -------- .../examples-from-react-router-website/Params.tsx | 2 +- .../Recursive.tsx | 4 ---- 8 files changed, 24 insertions(+), 21 deletions(-) diff --git a/types/react-router/index.d.ts b/types/react-router/index.d.ts index fff900d458..eee1b15972 100644 --- a/types/react-router/index.d.ts +++ b/types/react-router/index.d.ts @@ -68,15 +68,24 @@ export interface StaticContext { export interface RouteComponentProps { history: H.History; location: H.Location; - match: match | null; + match: match; staticContext?: C; } +export interface RouteChildrenProps< + Params extends { [K in keyof Params]?: string } = {}, + S = H.LocationState +> { + history: H.History; + location: H.Location; + match: match | null; +} + export interface RouteProps { location?: H.Location; component?: React.ComponentType> | React.ComponentType; render?: ((props: RouteComponentProps) => React.ReactNode); - children?: ((props: RouteComponentProps) => React.ReactNode) | React.ReactNode; + children?: ((props: RouteChildrenProps) => React.ReactNode) | React.ReactNode; path?: string | string[]; exact?: boolean; sensitive?: boolean; diff --git a/types/react-router/test/Children.tsx b/types/react-router/test/Children.tsx index c3dea4f482..7f33629f3c 100644 --- a/types/react-router/test/Children.tsx +++ b/types/react-router/test/Children.tsx @@ -20,3 +20,9 @@ function RouteWithElementJsxChildren() { {
Hello!
} ; } + +function RouteWithFunctionChildrenUsingNullableMatch() { + return + {({ match }) => match !== null ?
Matched path: {match.path}
:
No match!
} + ; +} diff --git a/types/react-router/test/examples-from-react-router-website/Ambiguous.tsx b/types/react-router/test/examples-from-react-router-website/Ambiguous.tsx index 3f2dbc2223..6e6598fd71 100644 --- a/types/react-router/test/examples-from-react-router-website/Ambiguous.tsx +++ b/types/react-router/test/examples-from-react-router-website/Ambiguous.tsx @@ -41,7 +41,7 @@ const AmbiguousExample = () => ( const About = () =>

About

; const Company = () =>

Company

; -const User: React.SFC> = ({ match }) => match && ( +const User: React.SFC> = ({ match }) => (

User: {match.params.user}

diff --git a/types/react-router/test/examples-from-react-router-website/Animation.tsx b/types/react-router/test/examples-from-react-router-website/Animation.tsx index 306ad14ea4..8133528179 100644 --- a/types/react-router/test/examples-from-react-router-website/Animation.tsx +++ b/types/react-router/test/examples-from-react-router-website/Animation.tsx @@ -72,12 +72,12 @@ interface HSLParams { l: string; } -const HSL: React.SFC> = ({ match }) => match && ( +const HSL: React.SFC> = ({ match: { params } }) => (
hsl({match.params.h}, {match.params.s}%, {match.params.l}%)
+ background: `hsl(${params.h}, ${params.s}%, ${params.l}%)` + }}>hsl({params.h}, {params.s}%, {params.l}%) ); const styles: any = {}; diff --git a/types/react-router/test/examples-from-react-router-website/Basic.tsx b/types/react-router/test/examples-from-react-router-website/Basic.tsx index 05e2101f85..ba6a5eabe5 100644 --- a/types/react-router/test/examples-from-react-router-website/Basic.tsx +++ b/types/react-router/test/examples-from-react-router-website/Basic.tsx @@ -36,7 +36,7 @@ const About = () => ( ); -const Topics: React.SFC = ({ match }) => match === null ? null : ( +const Topics: React.SFC = ({ match }) => (

Topics

    @@ -64,7 +64,7 @@ const Topics: React.SFC = ({ match }) => match === null ? n
); -const Topic: React.SFC> = ({ match }) => match && ( +const Topic: React.SFC> = ({ match }) => (

{match.params.topicId}

diff --git a/types/react-router/test/examples-from-react-router-website/ModalGallery.tsx b/types/react-router/test/examples-from-react-router-website/ModalGallery.tsx index be9bd1c322..c51d63ac0f 100644 --- a/types/react-router/test/examples-from-react-router-website/ModalGallery.tsx +++ b/types/react-router/test/examples-from-react-router-website/ModalGallery.tsx @@ -114,10 +114,6 @@ const Gallery = () => ( ); const ImageView: React.SFC> = ({ match }) => { - if (!match) { - return null; - } - const image = IMAGES[parseInt(match.params.id, 10)]; if (!image) { return
Image not found
; @@ -132,10 +128,6 @@ const ImageView: React.SFC> = ({ match }) => }; const Modal: React.SFC> = ({ match, history }) => { - if (!match) { - return null; - } - const image = IMAGES[parseInt(match.params.id, 10)]; if (!image) { return null; diff --git a/types/react-router/test/examples-from-react-router-website/Params.tsx b/types/react-router/test/examples-from-react-router-website/Params.tsx index 801a889d79..a6d0bded7f 100644 --- a/types/react-router/test/examples-from-react-router-website/Params.tsx +++ b/types/react-router/test/examples-from-react-router-website/Params.tsx @@ -22,7 +22,7 @@ const ParamsExample = () => ( ); -const Child: React.SFC> = ({ match }) => match && ( +const Child: React.SFC> = ({ match }) => (

ID: {match.params.id}

diff --git a/types/react-router/test/examples-from-react-router-website/Recursive.tsx b/types/react-router/test/examples-from-react-router-website/Recursive.tsx index 9489d2fb25..534fe52931 100644 --- a/types/react-router/test/examples-from-react-router-website/Recursive.tsx +++ b/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 = ({ match }) => { - if (!match) { - return null; - } - const person = find(match.params.id); return (