fix(router): redirect handling (#4543)

packages/qwik-city/buildtime/build-layout.unit.ts

@@ -4,7 +4,7 @@ import { testAppSuite } from '../utils/test-suite';
 const test = testAppSuite('Build Layout');
 
 test('total layouts', ({ layouts }) => {
-  equal(layouts.length, 8, JSON.stringify(layouts, null, 2));
+  equal(layouts.length, 10, JSON.stringify(layouts, null, 2));
 });
 
 test('nested named layout', ({ assertLayout }) => {

packages/qwik-city/middleware/request-handler/resolve-request-handlers.ts

@@ -63,6 +63,7 @@ export const resolveRequestHandlers = (
       requestHandlers.push(fixTrailingSlash);
       requestHandlers.push(renderQData);
     }
+    requestHandlers.push(handleRedirect);
     _resolveRequestHandlers(
       routeLoaders,
       routeActions,
@@ -458,7 +459,7 @@ export function renderQwikMiddleware(render: Render) {
   };
 }
 
-export async function renderQData(requestEv: RequestEvent) {
+export async function handleRedirect(requestEv: RequestEvent) {
   const isPageDataReq = requestEv.sharedMap.has(IsQData);
   if (isPageDataReq) {
     try {
@@ -474,7 +475,6 @@ export async function renderQData(requestEv: RequestEvent) {
 
     const status = requestEv.status();
     const location = requestEv.headers.get('Location');
-    const trailingSlash = getRequestTrailingSlash(requestEv);
     const isRedirect = status >= 301 && status <= 308 && location;
     if (isRedirect) {
       const adaptedLocation = makeQDataPath(location);
@@ -487,6 +487,21 @@ export async function renderQData(requestEv: RequestEvent) {
         requestEv.headers.delete('Location');
       }
     }
+  }
+}
+
+export async function renderQData(requestEv: RequestEvent) {
+  const isPageDataReq = requestEv.sharedMap.has(IsQData);
+  if (isPageDataReq) {
+    await requestEv.next();
+
+    if (requestEv.headersSent || requestEv.exited) {
+      return;
+    }
+
+    const status = requestEv.status();
+    const location = requestEv.headers.get('Location');
+    const trailingSlash = getRequestTrailingSlash(requestEv);
 
     const requestHeaders: Record<string, string> = {};
     requestEv.request.headers.forEach((value, key) => (requestHeaders[key] = value));

starters/apps/qwikcity-test/src/routes/issue4502/broken/index.tsx

@@ -2,5 +2,5 @@ import type { RequestHandler } from '@builder.io/qwik-city';
 
 export const onRequest: RequestHandler<void> = async (onRequestArgs) => {
   const { redirect, url } = onRequestArgs;
-  throw redirect(302, `${url.pathname}route/`);
+  throw redirect(302, `${url.pathname}/route/`);
 };

starters/apps/qwikcity-test/src/routes/issue4502/broken/route/index.tsx

@@ -1,7 +1,7 @@
 import { component$ } from '@builder.io/qwik';
 
 export default component$(() => (
-  <div>
+  <div id="route">
     welcome to <code>/broken/route</code>
   </div>
 ));

starters/apps/qwikcity-test/src/routes/issue4502/index.tsx

@@ -4,10 +4,14 @@ import { Link } from '@builder.io/qwik-city';
 export default component$(() => (
   <div>
     <p>
-      <Link href="/qwikcity-test/issue4502/broken">Broken Link</Link>
+      <Link id="link" href="/qwikcity-test/issue4502/broken">
+        Link
+      </Link>
     </p>
     <p>
-      <a href="/qwikcity-test/issue4502/broken">Working a</a>
+      <a id="anchor" href="/qwikcity-test/issue4502/broken">
+        Anchor
+      </a>
     </p>
   </div>
 ));

starters/apps/qwikcity-test/src/routes/issue4502/layout.tsx

@@ -0,0 +1,13 @@
+import { Slot, component$, useSignal } from '@builder.io/qwik';
+
+export default component$(() => {
+  const count = useSignal(0);
+  return (
+    <div>
+      <button id="count" onClick$={() => count.value++}>
+        Count: {count.value}
+      </button>
+      <Slot />
+    </div>
+  );
+});

starters/apps/qwikcity-test/src/routes/issue4531/index.tsx

@@ -0,0 +1,3 @@
+import { component$ } from '@builder.io/qwik';
+
+export default component$(() => <div id="route">should render</div>);

starters/apps/qwikcity-test/src/routes/issue4531/layout.tsx

@@ -0,0 +1,6 @@
+import type { RequestHandler } from '@builder.io/qwik-city';
+
+export const onRequest: RequestHandler<void> = async (onRequestArgs) => {
+  const { headers } = onRequestArgs;
+  headers.set('x-qwikcity-test', 'issue4531');
+};

starters/e2e/qwikcity/nav.spec.ts

@@ -125,6 +125,18 @@ test.describe('actions', () => {
         expect(toPath(page.url())).toEqual('/qwikcity-test/scroll-restoration/page-short/');
         expect(await getWindowScrollXY(page)).toStrictEqual([0, scrollHeightShort]);
       });
+
+      test('issue4502 (link)', async ({ page }) => {
+        await page.goto('/qwikcity-test/issue4502/');
+        const count = page.locator('#count');
+        await expect(count).toHaveText('Count: 0');
+        await count.click();
+        await expect(count).toHaveText('Count: 1');
+        await page.locator('#link').click();
+        await page.waitForURL('/qwikcity-test/issue4502/broken/route/');
+        await expect(page.locator('#route')).toHaveText('welcome to /broken/route');
+        await expect(count).toHaveText('Count: 1');
+      });
     });
   }
 
@@ -251,6 +263,19 @@ test.describe('actions', () => {
         });
       });
     });
+
+    test('issue4502 (anchor)', async ({ page }) => {
+      await page.goto('/qwikcity-test/issue4502/');
+      await page.locator('#anchor').click();
+      await page.waitForURL('/qwikcity-test/issue4502/broken/route/');
+      await expect(page.locator('#route')).toHaveText('welcome to /broken/route');
+    });
+
+    test('issue4531', async ({ page }) => {
+      const res = await page.goto('/qwikcity-test/issue4531/');
+      await expect(page.locator('#route')).toHaveText('should render');
+      expect(await res?.headerValue('X-Qwikcity-Test')).toEqual('issue4531');
+    });
   }
 });