diff --git a/packages/react-router/__tests__/useOutlet-test.tsx b/packages/react-router/__tests__/useOutlet-test.tsx index 036297072f..f283bd4874 100644 --- a/packages/react-router/__tests__/useOutlet-test.tsx +++ b/packages/react-router/__tests__/useOutlet-test.tsx @@ -268,4 +268,88 @@ describe("useOutlet", () => { `); }); }); + + describe("when child route without element prop", () => { + it("returns nested route element", () => { + function Layout() { + return useOutlet(); + } + + let renderer: TestRenderer.ReactTestRenderer; + TestRenderer.act(() => { + renderer = TestRenderer.create( + + + }> + + Profile} /> + + + + + ); + }); + + expect(renderer.toJSON()).toMatchInlineSnapshot(` +

+ Profile +

+ `); + }); + + it("returns the context", () => { + function Layout() { + return useOutlet(["Mary", "Jane", "Michael"]); + } + + function Profile() { + let outletContext = useOutletContext(); + + return ( +
+

Profile

+ +
+ ); + } + + let renderer: TestRenderer.ReactTestRenderer; + TestRenderer.act(() => { + renderer = TestRenderer.create( + + + }> + + } /> + + + + + ); + }); + + expect(renderer.toJSON()).toMatchInlineSnapshot(` +
+

+ Profile +

+ +
+ `); + }); + }); }); diff --git a/packages/react-router/index.tsx b/packages/react-router/index.tsx index d233710be5..f0cd9346d7 100644 --- a/packages/react-router/index.tsx +++ b/packages/react-router/index.tsx @@ -1070,7 +1070,7 @@ function _renderMatches( return ( + match.route.element !== undefined ? match.route.element : outlet } value={{ outlet,