fix: use entryName to ensure match the target route correctly (#6706)

Author: zllkjc

.changeset/slimy-rocks-mix.md

@@ -0,0 +1,6 @@
+---
+'@modern-js/server-core': patch
+---
+
+fix: use entryName to ensure match the target route correctly after router.rewrite
+fix: 通过 entryName 确保 router.rewrite 后能匹配到正确的路由

packages/server/core/src/plugins/customServer/index.ts

@@ -92,6 +92,7 @@ export class CustomServer {
         const rewriteRoute = routes.find(route => route.entryName === current);
         if (rewriteRoute) {
           c.set('matchPathname', rewriteRoute.urlPath);
+          c.set('matchEntryName', current);
         }
       }
 

packages/server/core/src/plugins/render/index.ts

@@ -120,6 +120,7 @@ function createRenderHandler(
     const locals = c.get('locals');
     const metrics = c.get('metrics');
     const matchPathname = c.get('matchPathname');
+    const matchEntryName = c.get('matchEntryName');
     const loaderContext = getLoaderCtx(c as Context);
 
     const request = c.req.raw;
@@ -136,6 +137,7 @@ function createRenderHandler(
       loaderContext,
       locals,
       matchPathname,
+      matchEntryName,
     });
 
     const { body, status, headers } = res;

packages/server/core/src/plugins/render/render.ts

@@ -72,16 +72,25 @@ function getRouter(routes: ServerRoute[]): Router<ServerRoute> {
   return router;
 }
 
+type MatchedRoute = [ServerRoute, Params];
 function matchRoute(
   router: Router<ServerRoute>,
   pathname: string,
-): [ServerRoute, Params] {
+  entryName?: string,
+): MatchedRoute {
   const matched = router.match('*', pathname);
-
-  const result = matched[0][0];
-
-  // here we can parse the dynamic server routes params
-  return result || [];
+  // For route rewrite in server.ts
+  // If entryName is existed and the pathname matched multiple routes, we use entryName to find the target route
+  if (entryName && matched[0].length > 1) {
+    const matches: Array<MatchedRoute> = matched[0];
+    const result = matches.find(
+      ([route]) => route.entryName === entryName,
+    ) as MatchedRoute;
+    return result || [];
+  } else {
+    const result = matched[0][0];
+    return result || [];
+  }
 }
 
 function getHeadersWithoutCookie(headers: Record<string, any>) {
@@ -117,12 +126,17 @@ export async function createRender({
       templates,
       serverManifest,
       locals,
+      matchEntryName,
       matchPathname,
       loaderContext,
     },
   ) => {
     const forMatchpathname = matchPathname ?? getPathname(req);
-    const [routeInfo, params] = matchRoute(router, forMatchpathname);
+    const [routeInfo, params] = matchRoute(
+      router,
+      forMatchpathname,
+      matchEntryName,
+    );
     const framework = metaName || 'modern-js';
     const fallbackHeader = `x-${cutNameByHyphen(framework)}-ssr-fallback`;
     let fallbackReason = null;

packages/server/core/src/types/render.ts

@@ -23,6 +23,9 @@ export interface RenderOptions {
   /** For compat rewrite MPA, while not modify request  */
   matchPathname?: string;
 
+  /** For compat rewrite MPA, while not modify request  */
+  matchEntryName?: string;
+
   monitors?: Monitors;
 
   serverManifest: ServerManifest;

packages/server/core/src/types/server.ts

@@ -63,6 +63,8 @@ type ServerVariables = {
   templates?: Record<string, string>;
 
   matchPathname?: string;
+
+  matchEntryName?: string;
   /**
    * Communicating with custom server hook & modern ssrContext.
    *

tests/integration/server-hook/router/modern.config.ts

@@ -9,6 +9,8 @@ export default applyBaseConfig({
   },
   server: {
     routes: {
+      pc: '/',
+      mobile: '/',
       home: '/rewrite',
       entry: '/redirect',
     },

tests/integration/server-hook/router/server/index.ts

@@ -8,6 +8,8 @@ export const afterMatch: AfterMatchHook = (ctx, next) => {
     router.rewrite('entry');
   } else if (pathname === '/redirect') {
     router.redirect('https://modernjs.dev/', 302);
+  } else {
+    router.rewrite('pc');
   }
 
   next();

tests/integration/server-hook/router/src/mobile/App.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+function App() {
+  return <div>Mobile Page</div>;
+}
+
+export default App;

tests/integration/server-hook/router/src/pc/App.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+function App() {
+  return <div>PC Page</div>;
+}
+
+export default App;

tests/integration/server-hook/router/tests/index.test.ts

@@ -35,7 +35,7 @@ describe('test status code page', () => {
     await browser.close();
   });
 
-  test.skip('should router rewrite correctly ', async () => {
+  test('should router rewrite correctly ', async () => {
     await page.goto(`http://localhost:${port}/rewrite`);
     const text = await page.$eval('#root', el => el?.textContent);
     expect(text).toMatch('Entry Page');
@@ -48,4 +48,16 @@ describe('test status code page', () => {
     const text = await response!.text();
     expect(text).toMatch('Modern Web Development');
   });
+
+  test('should router redirect correctly ', async () => {
+    await page.goto(`http://localhost:${port}/mobile`);
+    const text = await page.$eval('#root', el => el?.textContent);
+    expect(text).toMatch('PC Page');
+  });
+
+  test('should router redirect correctly ', async () => {
+    await page.goto(`http://localhost:${port}/pc`);
+    const text = await page.$eval('#root', el => el?.textContent);
+    expect(text).toMatch('PC Page');
+  });
 });