fix(useOutlet): don't wrap in ContextProvider if no child route (#8484)

remix-run · Dec 14, 2021 · bb81ad6 · bb81ad6
1 parent ab8118e
commit bb81ad6
Show file tree

Hide file tree

Showing 2 changed files with 108 additions and 5 deletions.
diff --git a/packages/react-router/__tests__/useOutlet-test.tsx b/packages/react-router/__tests__/useOutlet-test.tsx
@@ -28,6 +28,54 @@ 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", () => {
@@ -55,9 +103,61 @@ 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("when there is no context", () => {
+  describe("OutletContext when there is no context", () => {
     it("returns null", () => {
       function Users() {
         return useOutlet();
@@ -98,7 +198,7 @@ describe("useOutlet", () => {
     });
   });
 
-  describe("when there is context", () => {
+  describe("OutletContext 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,9 +579,12 @@ export function useOutletContext<Context = unknown>(): Context {
  */
 export function useOutlet(context?: unknown): React.ReactElement | null {
   let outlet = React.useContext(RouteContext).outlet;
-  return (
-    <OutletContext.Provider value={context}>{outlet}</OutletContext.Provider>
-  );
+  if (outlet) {
+    return (
+      <OutletContext.Provider value={context}>{outlet}</OutletContext.Provider>
+    );
+  }
+  return outlet;
 }
 
 /**