Fix hydrate fallback rendering for SPA middleware w/o loader

.changeset/olive-walls-rule.md

@@ -0,0 +1,5 @@
+---
+"react-router": patch
+---
+
+Ensure `HydrateFallback` renders during SPA initialization for routes that have `middleware` but do not have a `loader`

packages/react-router/__tests__/dom/data-browser-router-test.tsx

@@ -501,6 +501,60 @@ function testDomRouter(
       `);
     });
 
+    it("renders hydrateFallbackElement while first data fetch happens when it is only middleware", async () => {
+      let middlewareDfd = createDeferred();
+      let router = createTestRouter(
+        createRoutesFromElements(
+          <Route
+            path="/"
+            element={<Outlet />}
+            hydrateFallbackElement={<FallbackElement />}
+          >
+            <Route
+              path="foo"
+              middleware={[() => middlewareDfd.promise]}
+              element={<Foo />}
+            />
+            <Route path="bar" element={<Bar />} />
+          </Route>,
+        ),
+        {
+          window: getWindow("/foo"),
+        },
+      );
+      let { container } = render(<RouterProvider router={router} />);
+
+      function FallbackElement() {
+        return <p>Loading...</p>;
+      }
+
+      function Foo() {
+        return <h1>Foo</h1>;
+      }
+
+      function Bar() {
+        return <h1>Bar Heading</h1>;
+      }
+
+      expect(getHtml(container)).toMatchInlineSnapshot(`
+        "<div>
+          <p>
+            Loading...
+          </p>
+        </div>"
+      `);
+
+      middlewareDfd.resolve();
+      await waitFor(() => screen.getByText("Foo"));
+      expect(getHtml(container)).toMatchInlineSnapshot(`
+        "<div>
+          <h1>
+            Foo
+          </h1>
+        </div>"
+      `);
+    });
+
     it("does not render fallbackElement if no data fetch or lazy loading is required", async () => {
       let fooDefer = createDeferred();
       let router = createTestRouter(

packages/react-router/__tests__/router/context-middleware-test.tsx → packages/react-router/__tests__/router/context-middleware-test.ts

@@ -749,57 +749,6 @@ describe("context/middleware", () => {
 
         unsub();
       });
-
-      it("works with createRoutesFromElements", async () => {
-        let context = new RouterContextProvider();
-        router = createRouter({
-          history: createMemoryHistory(),
-          getContext: () => context,
-          routes: createRoutesFromElements(
-            <>
-              <Route path="/" />
-              <Route
-                id="parent"
-                path="/parent"
-                middleware={[
-                  getOrderMiddleware(orderContext, "a"),
-                  getOrderMiddleware(orderContext, "b"),
-                ]}
-                loader={({ context }) => {
-                  context.get(orderContext).push("parent loader");
-                }}
-              >
-                <Route
-                  id="child"
-                  path="child"
-                  middleware={[
-                    getOrderMiddleware(orderContext, "c"),
-                    getOrderMiddleware(orderContext, "d"),
-                  ]}
-                  loader={({ context }) => {
-                    context.get(orderContext).push("child loader");
-                  }}
-                />
-              </Route>
-            </>,
-          ),
-        });
-
-        await router.navigate("/parent/child");
-
-        expect(context.get(orderContext)).toEqual([
-          "a middleware - before next()",
-          "b middleware - before next()",
-          "c middleware - before next()",
-          "d middleware - before next()",
-          "parent loader",
-          "child loader",
-          "d middleware - after next()",
-          "c middleware - after next()",
-          "b middleware - after next()",
-          "a middleware - after next()",
-        ]);
-      });
     });
 
     describe("lazy", () => {

packages/react-router/lib/hooks.tsx

@@ -1158,7 +1158,7 @@ export function _renderMatches(
   // a given HydrateFallback while we load the rest of the hydration data
   let renderFallback = false;
   let fallbackIndex = -1;
-  if (dataRouterState) {
+  if (dataRouterState && !dataRouterState.initialized) {
     for (let i = 0; i < renderedMatches.length; i++) {
       let match = renderedMatches[i];
       // Track the deepest fallback up until the first route without data
@@ -1168,11 +1168,15 @@ export function _renderMatches(
 
       if (match.route.id) {
         let { loaderData, errors } = dataRouterState;
+        let needsToRunSpaMiddleware =
+          match.route.middleware &&
+          match.route.middleware.length > 0 &&
+          !match.route.loader;
         let needsToRunLoader =
           match.route.loader &&
           !loaderData.hasOwnProperty(match.route.id) &&
           (!errors || errors[match.route.id] === undefined);
-        if (match.route.lazy || needsToRunLoader) {
+        if (match.route.lazy || needsToRunSpaMiddleware || needsToRunLoader) {
           // We found the first route that's not ready to render (waiting on
           // lazy, or has a loader that hasn't run yet).  Flag that we need to
           // render a fallback and render up until the appropriate fallback