Revert "fix(useOutlet): don't wrap in ContextProvider if no child rou…

…te (#8483)" This reverts commit 2b4aed6.
remix-run · Dec 14, 2021 · fceae42 · fceae42
1 parent 2b4aed6
commit fceae42
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 108 deletions.
diff --git a/packages/react-router/__tests__/useOutlet-test.tsx b/packages/react-router/__tests__/useOutlet-test.tsx
@@ -28,54 +28,6 @@ describe("useOutlet", () => {
 
       expect(renderer.toJSON()).toBeNull();
     });
-
-    it("renders the fallback", () => {
-      function Home() {
-        let outlet = useOutlet();
-        return <div>{outlet ? "outlet" : "no outlet"}</div>;
-      }
-
-      let renderer: TestRenderer.ReactTestRenderer;
-      TestRenderer.act(() => {
-        renderer = TestRenderer.create(
-          <MemoryRouter initialEntries={["/home"]}>
-            <Routes>
-              <Route path="/home" element={<Home />} />
-            </Routes>
-          </MemoryRouter>
-        );
-      });
-
-      expect(renderer.toJSON()).toMatchInlineSnapshot(`
-        <div>
-          no outlet
-        </div>
-      `);
-    });
-
-    it("renders the fallback with context provided", () => {
-      function Home() {
-        let outlet = useOutlet({ some: "context" });
-        return <div>{outlet ? "outlet" : "no outlet"}</div>;
-      }
-
-      let renderer: TestRenderer.ReactTestRenderer;
-      TestRenderer.act(() => {
-        renderer = TestRenderer.create(
-          <MemoryRouter initialEntries={["/home"]}>
-            <Routes>
-              <Route path="/home" element={<Home />} />
-            </Routes>
-          </MemoryRouter>
-        );
-      });
-
-      expect(renderer.toJSON()).toMatchInlineSnapshot(`
-        <div>
-          no outlet
-        </div>
-      `);
-    });
   });
 
   describe("when there is a child route", () => {
@@ -103,61 +55,9 @@ describe("useOutlet", () => {
         </h1>
       `);
     });
-
-    it("returns an element when no context", () => {
-      function Home() {
-        let outlet = useOutlet();
-        return <div>{outlet ? "outlet" : "no outlet"}</div>;
-      }
-
-      let renderer: TestRenderer.ReactTestRenderer;
-      TestRenderer.act(() => {
-        renderer = TestRenderer.create(
-          <MemoryRouter initialEntries={["/home"]}>
-            <Routes>
-              <Route path="/home" element={<Home />}>
-                <Route index element={<div>index</div>} />
-              </Route>
-            </Routes>
-          </MemoryRouter>
-        );
-      });
-
-      expect(renderer.toJSON()).toMatchInlineSnapshot(`
-          <div>
-            outlet
-          </div>
-        `);
-    });
-
-    it("returns an element when context", () => {
-      function Home() {
-        let outlet = useOutlet({ some: "context" });
-        return <div>{outlet ? "outlet" : "no outlet"}</div>;
-      }
-
-      let renderer: TestRenderer.ReactTestRenderer;
-      TestRenderer.act(() => {
-        renderer = TestRenderer.create(
-          <MemoryRouter initialEntries={["/home"]}>
-            <Routes>
-              <Route path="/home" element={<Home />}>
-                <Route index element={<div>index</div>} />
-              </Route>
-            </Routes>
-          </MemoryRouter>
-        );
-      });
-
-      expect(renderer.toJSON()).toMatchInlineSnapshot(`
-          <div>
-            outlet
-          </div>
-        `);
-    });
   });
 
-  describe("OutletContext when there is no context", () => {
+  describe("when there is no context", () => {
     it("returns null", () => {
       function Users() {
         return useOutlet();
@@ -198,7 +98,7 @@ describe("useOutlet", () => {
     });
   });
 
-  describe("OutletContext when there is context", () => {
+  describe("when there is context", () => {
     it("returns the context", () => {
       function Users() {
         return useOutlet([

diff --git a/packages/react-router/index.tsx b/packages/react-router/index.tsx
@@ -579,12 +579,9 @@ export function useOutletContext<Context = unknown>(): Context {
  */
 export function useOutlet(context?: unknown): React.ReactElement | null {
   let outlet = React.useContext(RouteContext).outlet;
-  if (outlet) {
-    return (
-      <OutletContext.Provider value={context}>{outlet}</OutletContext.Provider>
-    );
-  }
-  return outlet;
+  return (
+    <OutletContext.Provider value={context}>{outlet}</OutletContext.Provider>
+  );
 }
 
 /**