diff --git a/packages/react-router/__tests__/useOutlet-test.tsx b/packages/react-router/__tests__/useOutlet-test.tsx
index f488f975bc..6fae45e0e9 100644
--- a/packages/react-router/__tests__/useOutlet-test.tsx
+++ b/packages/react-router/__tests__/useOutlet-test.tsx
@@ -5,7 +5,8 @@ import {
Routes,
Route,
useOutlet,
- useOutletContext
+ useOutletContext,
+ Outlet
} from "react-router";
describe("useOutlet", () => {
@@ -268,4 +269,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
+
+ {outletContext.map(name => (
+ - {name}
+ ))}
+
+
+ );
+ }
+
+ let renderer: TestRenderer.ReactTestRenderer;
+ TestRenderer.act(() => {
+ renderer = TestRenderer.create(
+
+
+ }>
+
+ } />
+
+
+
+
+ );
+ });
+
+ expect(renderer.toJSON()).toMatchInlineSnapshot(`
+
+
+ Profile
+
+
+ -
+ Mary
+
+ -
+ Jane
+
+ -
+ Michael
+
+
+
+ `);
+ });
+ });
});
diff --git a/packages/react-router/index.tsx b/packages/react-router/index.tsx
index 135d2e6bae..4007af38ce 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,