fix: render function dynamic router match error (#5831)

.changeset/plenty-ducks-itch.md

@@ -0,0 +1,6 @@
+---
+'@modern-js/server-core': patch
+---
+
+fix: render function dynamic router match error
+fix: render 函数动态路由匹配错误

packages/server/core/src/base/middlewares/renderHandler/render.ts

@@ -38,12 +38,28 @@ interface CreateRenderOptions {
   nonce?: string;
 }
 
+const DYNAMIC_ROUTE_REG = /\/:./;
+
 function getRouter(routes: ServerRoute[]): Router<ServerRoute> {
-  const sorted = routes.sort(sortRoutes);
+  const dynamicRoutes: ServerRoute[] = [];
+  const normalRoutes: ServerRoute[] = [];
+
+  routes.forEach(route => {
+    if (DYNAMIC_ROUTE_REG.test(route.urlPath)) {
+      dynamicRoutes.push(route);
+    } else {
+      normalRoutes.push(route);
+    }
+  });
+
+  const finalRoutes = [
+    ...normalRoutes.sort(sortRoutes),
+    ...dynamicRoutes.sort(sortRoutes),
+  ];
 
   const router = new TrieRouter<ServerRoute>();
 
-  for (const route of sorted) {
+  for (const route of finalRoutes) {
     const { urlPath: originUrlPath } = route;
 
     const urlPath = originUrlPath.endsWith('/')

tests/integration/routes-match/modern.config.ts

@@ -0,0 +1,23 @@
+import { appTools, defineConfig } from '@modern-js/app-tools';
+
+const bundler = process.env.BUNDLER;
+
+export default defineConfig({
+  plugins: [
+    appTools({
+      bundler: bundler === 'rspack' ? 'experimental-rspack' : 'webpack',
+    }),
+  ],
+  runtime: {
+    router: false,
+    state: false,
+  },
+  server: {
+    ssr: true,
+    routes: {
+      a: '/detail/:id',
+      b: '/detail/1',
+      c: '/detail/12',
+    },
+  },
+});

tests/integration/routes-match/package.json

@@ -0,0 +1,34 @@
+{
+  "private": true,
+  "name": "routes-match",
+  "version": "2.9.0",
+  "scripts": {
+    "dev": "modern dev",
+    "build": "modern build",
+    "serve": "modern serve",
+    "new": "modern new",
+    "lint": "modern lint"
+  },
+  "engines": {
+    "node": ">=14.17.6"
+  },
+  "eslintIgnore": [
+    "node_modules/",
+    "dist/"
+  ],
+  "dependencies": {
+    "@modern-js/runtime": "workspace:*",
+    "react": "^18",
+    "react-dom": "^18",
+    "fs-extra": "^10.1.0"
+  },
+  "devDependencies": {
+    "@modern-js/app-tools": "workspace:*",
+    "@types/fs-extra": "9.0.13",
+    "@types/node": "^14",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "typescript": "^5",
+    "@types/jest": "^29"
+  }
+}

tests/integration/routes-match/src/a/App.tsx

@@ -0,0 +1 @@
+export default () => <div>AAA</div>;

tests/integration/routes-match/src/b/App.tsx

@@ -0,0 +1 @@
+export default () => <div>BBB</div>;

tests/integration/routes-match/src/c/App.tsx

@@ -0,0 +1 @@
+export default () => <div>CCC</div>;

tests/integration/routes-match/tests/index.test.ts

@@ -0,0 +1,54 @@
+import dns from 'node:dns';
+import path from 'path';
+import puppeteer, { Page, Browser } from 'puppeteer';
+import {
+  launchApp,
+  getPort,
+  killApp,
+  launchOptions,
+} from '../../../utils/modernTestUtils';
+
+dns.setDefaultResultOrder('ipv4first');
+
+const appDir = path.resolve(__dirname, '../');
+
+describe('map routes match', () => {
+  let app: any;
+  let appPort: number;
+  let page: Page;
+  let browser: Browser;
+
+  beforeAll(async () => {
+    appPort = await getPort();
+    app = await launchApp(appDir, appPort, {});
+
+    browser = await puppeteer.launch(launchOptions as any);
+    page = await browser.newPage();
+  });
+
+  afterAll(async () => {
+    if (browser) {
+      browser.close();
+    }
+    if (app) {
+      await killApp(app);
+    }
+  });
+
+  test('should match route correctly', async () => {
+    const res1 = await page.goto(`http://localhost:${appPort}/detail/123`);
+    const text1 = await res1.text();
+
+    expect(text1).toMatch('AAA');
+
+    const res2 = await page.goto(`http://localhost:${appPort}/detail/1`);
+    const text2 = await res2.text();
+
+    expect(text2).toMatch('BBB');
+
+    const res3 = await page.goto(`http://localhost:${appPort}/detail/12`);
+    const text3 = await res3.text();
+
+    expect(text3).toMatch('CCC');
+  });
+});

tests/integration/routes-match/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "@modern-js/tsconfig/base",
+  "compilerOptions": {
+    "declaration": false,
+    "jsx": "preserve",
+    "baseUrl": "./",
+    "paths": {
+      "@/*": ["./src/*"],
+      "@shared/*": ["./shared/*"]
+    }
+  },
+  "include": ["src", "shared", "config"]
+}