From 16e60be7dd8adfed40dde650bc04dbf9933d2431 Mon Sep 17 00:00:00 2001
From: hanquliu <hanquliu@tencent.com>
Date: Fri, 17 Dec 2021 14:29:43 +0800
Subject: [PATCH] Use outlet directly if route without element

---
 .../react-router/__tests__/useOutlet-test.tsx | 87 ++++++++++++++++++-
 packages/react-router/index.tsx               |  2 +-
 2 files changed, 87 insertions(+), 2 deletions(-)

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(
+          <MemoryRouter initialEntries={["/users/profile"]}>
+            <Routes>
+              <Route path="/" element={<Layout />}>
+                <Route path="users">
+                  <Route path="profile" element={<h1>Profile</h1>} />
+                </Route>
+              </Route>
+            </Routes>
+          </MemoryRouter>
+        );
+      });
+
+      expect(renderer.toJSON()).toMatchInlineSnapshot(`
+        <h1>
+          Profile
+        </h1>
+      `);
+    });
+
+    it("returns the context", () => {
+      function Layout() {
+        return useOutlet(["Mary", "Jane", "Michael"]);
+      }
+
+      function Profile() {
+        let outletContext = useOutletContext<string[]>();
+
+        return (
+          <div>
+            <h1>Profile</h1>
+            <ul>
+              {outletContext.map(name => (
+                <li key={name}>{name}</li>
+              ))}
+            </ul>
+          </div>
+        );
+      }
+
+      let renderer: TestRenderer.ReactTestRenderer;
+      TestRenderer.act(() => {
+        renderer = TestRenderer.create(
+          <MemoryRouter initialEntries={["/users/profile"]}>
+            <Routes>
+              <Route path="/" element={<Layout />}>
+                <Route path="users">
+                  <Route path="profile" element={<Profile />} />
+                </Route>
+              </Route>
+            </Routes>
+          </MemoryRouter>
+        );
+      });
+
+      expect(renderer.toJSON()).toMatchInlineSnapshot(`
+        <div>
+          <h1>
+            Profile
+          </h1>
+          <ul>
+            <li>
+              Mary
+            </li>
+            <li>
+              Jane
+            </li>
+            <li>
+              Michael
+            </li>
+          </ul>
+        </div>
+      `);
+    });
+  });
 });
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 (
       <RouteContext.Provider
         children={
-          match.route.element !== undefined ? match.route.element : <Outlet />
+          match.route.element !== undefined ? match.route.element : outlet
         }
         value={{
           outlet,