From 0c08f36227a563f7099262955fa60e20e56e340a Mon Sep 17 00:00:00 2001 From: Logan McAnsh Date: Tue, 14 Dec 2021 10:56:31 -0500 Subject: [PATCH 1/3] fix(useOutlet): dont wrap in context if no context Signed-off-by: Logan McAnsh --- packages/react-router/index.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/react-router/index.tsx b/packages/react-router/index.tsx index f90915aad4..05dc7022d2 100644 --- a/packages/react-router/index.tsx +++ b/packages/react-router/index.tsx @@ -579,9 +579,12 @@ export function useOutletContext(): Context { */ export function useOutlet(context?: unknown): React.ReactElement | null { let outlet = React.useContext(RouteContext).outlet; - return ( - {outlet} - ); + if (context) { + return ( + {outlet} + ); + } + return outlet; } /** From cfff8a505aa7caeb22cbf1534129adfbc73f6754 Mon Sep 17 00:00:00 2001 From: Logan McAnsh Date: Tue, 14 Dec 2021 10:57:05 -0500 Subject: [PATCH 2/3] test: add more tests for outlet Signed-off-by: Logan McAnsh --- .../react-router/__tests__/useOutlet-test.tsx | 50 +++++++++++++++++++ 1 file changed, 50 insertions(+) diff --git a/packages/react-router/__tests__/useOutlet-test.tsx b/packages/react-router/__tests__/useOutlet-test.tsx index 17a9133e91..acf019b70f 100644 --- a/packages/react-router/__tests__/useOutlet-test.tsx +++ b/packages/react-router/__tests__/useOutlet-test.tsx @@ -28,6 +28,56 @@ describe("useOutlet", () => { expect(renderer.toJSON()).toBeNull(); }); + + it("renders the fallback", () => { + function Home() { + let outlet = useOutlet(); + return
{outlet ? "outlet" : "no outlet"}
; + } + + let renderer: TestRenderer.ReactTestRenderer; + TestRenderer.act(() => { + renderer = TestRenderer.create( + + + } /> + + + ); + }); + + expect(renderer.toJSON()).toMatchInlineSnapshot(` +
+ no outlet +
+ `); + }); + }); + + it("renders the outlet", () => { + function Home() { + let outlet = useOutlet(); + return
{outlet ? "outlet" : "no outlet"}
; + } + + let renderer: TestRenderer.ReactTestRenderer; + TestRenderer.act(() => { + renderer = TestRenderer.create( + + + }> + index} /> + + + + ); + }); + + expect(renderer.toJSON()).toMatchInlineSnapshot(` +
+ outlet +
+ `); }); describe("when there is a child route", () => { From 7d16c394c7c155b4aac1dbe1f254aa89531d185a Mon Sep 17 00:00:00 2001 From: Logan McAnsh Date: Tue, 14 Dec 2021 11:48:18 -0500 Subject: [PATCH 3/3] chore: only add context provider if child route Signed-off-by: Logan McAnsh --- .../react-router/__tests__/useOutlet-test.tsx | 96 ++++++++++++++----- packages/react-router/index.tsx | 2 +- 2 files changed, 74 insertions(+), 24 deletions(-) diff --git a/packages/react-router/__tests__/useOutlet-test.tsx b/packages/react-router/__tests__/useOutlet-test.tsx index acf019b70f..f488f975bc 100644 --- a/packages/react-router/__tests__/useOutlet-test.tsx +++ b/packages/react-router/__tests__/useOutlet-test.tsx @@ -52,32 +52,30 @@ describe("useOutlet", () => { `); }); - }); - it("renders the outlet", () => { - function Home() { - let outlet = useOutlet(); - return
{outlet ? "outlet" : "no outlet"}
; - } - - let renderer: TestRenderer.ReactTestRenderer; - TestRenderer.act(() => { - renderer = TestRenderer.create( - - - }> - index} /> - - - - ); - }); + it("renders the fallback with context provided", () => { + function Home() { + let outlet = useOutlet({ some: "context" }); + return
{outlet ? "outlet" : "no outlet"}
; + } + + let renderer: TestRenderer.ReactTestRenderer; + TestRenderer.act(() => { + renderer = TestRenderer.create( + + + } /> + + + ); + }); - expect(renderer.toJSON()).toMatchInlineSnapshot(` + expect(renderer.toJSON()).toMatchInlineSnapshot(`
- outlet + no outlet
`); + }); }); describe("when there is a child route", () => { @@ -105,9 +103,61 @@ describe("useOutlet", () => { `); }); + + it("returns an element when no context", () => { + function Home() { + let outlet = useOutlet(); + return
{outlet ? "outlet" : "no outlet"}
; + } + + let renderer: TestRenderer.ReactTestRenderer; + TestRenderer.act(() => { + renderer = TestRenderer.create( + + + }> + index} /> + + + + ); + }); + + expect(renderer.toJSON()).toMatchInlineSnapshot(` +
+ outlet +
+ `); + }); + + it("returns an element when context", () => { + function Home() { + let outlet = useOutlet({ some: "context" }); + return
{outlet ? "outlet" : "no outlet"}
; + } + + let renderer: TestRenderer.ReactTestRenderer; + TestRenderer.act(() => { + renderer = TestRenderer.create( + + + }> + index} /> + + + + ); + }); + + expect(renderer.toJSON()).toMatchInlineSnapshot(` +
+ outlet +
+ `); + }); }); - describe("when there is no context", () => { + describe("OutletContext when there is no context", () => { it("returns null", () => { function Users() { return useOutlet(); @@ -148,7 +198,7 @@ describe("useOutlet", () => { }); }); - describe("when there is context", () => { + describe("OutletContext when there is context", () => { it("returns the context", () => { function Users() { return useOutlet([ diff --git a/packages/react-router/index.tsx b/packages/react-router/index.tsx index 05dc7022d2..d0fa995f0e 100644 --- a/packages/react-router/index.tsx +++ b/packages/react-router/index.tsx @@ -579,7 +579,7 @@ export function useOutletContext(): Context { */ export function useOutlet(context?: unknown): React.ReactElement | null { let outlet = React.useContext(RouteContext).outlet; - if (context) { + if (outlet) { return ( {outlet} );