Fix: use outlet directly if route without element (#8497)

Co-authored-by: hanquliu <[email protected]>
remix-run · Feb 25, 2022 · bef3166 · bef3166
1 parent 921d270
commit bef3166
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 1 deletion.
diff --git 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
@@ -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,