From bef3166b3a378c02d06cb651a6c48556f1c70107 Mon Sep 17 00:00:00 2001
From: laohan <120936337@qq.com>
Date: Fri, 25 Feb 2022 12:57:39 +0800
Subject: [PATCH] Fix: use outlet directly if route without element (#8497)

Co-authored-by: hanquliu <hanquliu@tencent.com>
---
 .../react-router/__tests__/useOutlet-test.tsx | 84 +++++++++++++++++++
 packages/react-router/index.tsx               |  2 +-
 2 files changed, 85 insertions(+), 1 deletion(-)

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(
+          <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 d233710be5..f0cd9346d7 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,