fix: 修复 getClientRootComponent 方法. 增加 ssr basename 案例

examples/ssg-basename/.umirc.ts

@@ -0,0 +1,6 @@
+export default {
+  exportStatic: {},
+  ssr: {},
+  base: '/base/',
+  publicPath: '/base/', // 布署时需要布署在 base 文件夹下.
+};

examples/ssg-basename/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@example/ssg-basename",
+  "private": true,
+  "description": "该案例用于测试 ssg 预渲染. 当 umi 配置表中设置了 base 后, ssg 输出的预渲染页面中的 a 标签需要有正确的 base 前缀",
+  "scripts": {
+    "build": "umi build",
+    "dev": "umi dev",
+    "setup": "umi setup",
+    "start": "npm run dev"
+  },
+  "dependencies": {
+    "umi": "workspace:*"
+  }
+}

examples/ssg-basename/src/layouts/index.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { Outlet } from 'umi';
+
+const Layout = () => {
+  return (
+    <div>
+      <div style={{ marginBottom: '10px' }}>HEADER</div>
+      <Outlet />
+    </div>
+  );
+};
+
+export default Layout;

examples/ssg-basename/src/pages/about/index.tsx

@@ -0,0 +1,24 @@
+import React, { useState } from 'react';
+import { Link } from 'umi';
+
+const About = () => {
+  const [num, setNum] = useState(0);
+
+  return (
+    <div>
+      <div>
+        <strong>ABOUT</strong> page
+        <button
+          style={{ marginLeft: '5px' }}
+          onClick={() => setNum((val) => val + 1)}
+        >
+          couts: {num}
+        </button>
+      </div>
+      <br />
+      <Link to="/">to home</Link>
+    </div>
+  );
+};
+
+export default About;

examples/ssg-basename/src/pages/index.tsx

@@ -0,0 +1,24 @@
+import React, { useState } from 'react';
+import { Link } from 'umi';
+
+const Home = () => {
+  const [num, setNum] = useState(0);
+  return (
+    <div>
+      <div>
+        <strong>HOME</strong> page
+        <button
+          style={{ marginLeft: '5px' }}
+          onClick={() => setNum((val) => val + 1)}
+        >
+          couts: {num}
+        </button>
+      </div>
+
+      <br />
+      <Link to="/about">to about</Link>
+    </div>
+  );
+};
+
+export default Home;

examples/ssr-export-static-basename/.umirc.ts → examples/ssr-basename/.umirc.ts

@@ -1,6 +1,5 @@
 export default {
   ssr: {},
   exportStatic: {},
-  hash: true,
-  base: '/a/',
+  base: '/base/',
 };

examples/ssr-basename/plugins/mylogger.ts

@@ -0,0 +1,37 @@
+import { writeFileSync } from 'fs';
+import { IApi } from 'umi';
+
+export default (api: IApi) => {
+  api.describe({
+    key: 'mylogger',
+    config: {
+      schema(joi) {
+        return joi.string();
+      },
+    },
+    enableBy: api.EnableBy.register,
+  });
+
+  api.registerMethod({
+    name: 'mylogger',
+    fn: (pathname, obj) => {
+      let cache = [];
+      const str = JSON.stringify(obj, function (key, value) {
+        if (typeof value === 'object' && value !== null) {
+          if (cache.indexOf(value) !== -1) {
+            // 移除
+            return;
+          }
+          // 收集所有的值
+          cache.push(value);
+        }
+        return value;
+      });
+      cache = null;
+
+      writeFileSync(pathname, str, () => {
+        console.log('write log finish');
+      });
+    },
+  });
+};

examples/ssr-basename/plugins/picker.ts

@@ -0,0 +1,28 @@
+import type { IApi } from 'umi';
+
+export default (api: IApi) => {
+  api.describe({
+    key: 'routePicker',
+    config: {
+      schema({ zod }) {
+        return zod.array(zod.string());
+      },
+    },
+    enableBy: () => {
+      return api.name === 'dev';
+    },
+  });
+
+  console.log('插件 picker 注册');
+
+  api.onCheck(async () => {
+    // console.log('插件', api.appData.routes);
+    console.log('插件config', api.config);
+    api.config.routes = [
+      {
+        path: '/',
+        component: 'index',
+      },
+    ];
+  });
+};

examples/ssr-basename/src/layouts/index.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { Outlet } from 'umi';
+
+const Layout = () => {
+  return (
+    <div>
+      <div style={{ marginBottom: '10px' }}>HEADER</div>
+      <Outlet />
+    </div>
+  );
+};
+
+export default Layout;

examples/ssr-basename/src/pages/about/form/index.tsx

@@ -0,0 +1,3 @@
+export default function AboutForm() {
+  return <div>About Form</div>;
+}

examples/ssr-basename/src/pages/about/index.tsx

@@ -0,0 +1,24 @@
+import React, { useState } from 'react';
+import { Link } from 'umi';
+
+const About = () => {
+  const [num, setNum] = useState(0);
+
+  return (
+    <div>
+      <div>
+        <strong>ABOUT</strong> page
+        <button
+          style={{ marginLeft: '5px' }}
+          onClick={() => setNum((val) => val + 1)}
+        >
+          couts: {num}
+        </button>
+      </div>
+      <br />
+      <Link to="/">to home</Link>
+    </div>
+  );
+};
+
+export default About;

examples/ssr-basename/src/pages/index.tsx

@@ -0,0 +1,24 @@
+import React, { useState } from 'react';
+import { Link } from 'umi';
+
+const Home = () => {
+  const [num, setNum] = useState(0);
+  return (
+    <div>
+      <div>
+        <strong>HOME</strong> page
+        <button
+          style={{ marginLeft: '5px' }}
+          onClick={() => setNum((val) => val + 1)}
+        >
+          couts: {num}
+        </button>
+      </div>
+
+      <br />
+      <Link to="/about">to about</Link>
+    </div>
+  );
+};
+
+export default Home;

packages/preset-umi/src/features/exportStatic/exportStatic.ts

@@ -60,13 +60,32 @@ function getExportHtmlData(routes: Record<string, IRoute>): IExportHtmlItem[] {
 async function getPreRenderedHTML(api: IApi, htmlTpl: string, path: string) {
   const {
     exportStatic: { ignorePreRenderError = false },
+    base,
   } = api.config;
   markupRender ??= require(absServerBuildPath(api))._markupGenerator;
 
   try {
-    const html = await markupRender(path);
+    const location = `${base.endsWith('/') ? base.slice(0, -1) : base}${path}`;
+    const markup = await markupRender(location);
+    const [mainTpl, extraTpl = ''] = markup.split('</html>');
+    // TODO: improve return type for markup generator
+    const helmetContent = mainTpl.match(
+      /<head>[^]*?(<[^>]+data-rh[^]+)<\/head>/,
+    )?.[1];
+    const bodyContent = mainTpl.match(/<body[^>]*>([^]+?)<\/body>/)?.[1];
+
+    htmlTpl = htmlTpl
+      // append helmet content
+      .replace('</head>', `${helmetContent || ''}</head>`)
+      // replace #root with pre-rendered body content
+      .replace(
+        new RegExp(`<div id="${api.config.mountElementId}"[^>]*>.*?</div>`),
+        bodyContent,
+      )
+      // append hidden templates
+      .replace(/$/, `${extraTpl}`);
     logger.info(`Pre-render for ${path}`);
-    return html;
+    return htmlTpl;
   } catch (err) {
     logger.error(`Pre-render ${path} error: ${err}`);
     if (!ignorePreRenderError) {

packages/renderer-react/src/server.tsx

@@ -23,7 +23,12 @@ export async function getClientRootComponent(opts: IRootComponentOptions) {
       routes: clientRoutes,
     },
   });
+
   let rootContainer = (
+    // 这里的 location 需要包含 basename, 否则会影响 StaticRouter 的匹配.
+    // 由于 getClientRootComponent 方法会同时用于 ssr 和 ssg, 所以在调用该方法时需要注意传入的 location 是否包含 basename.
+    // 1. 在用于 ssr 时传入的 location 来源于 request.url, 它是包含 basename 的, 所以没有问题.
+    // 2. 但是在用于 ssg 时(static export), 需要注意传入的 locaiton 要拼接上 basename.
     <StaticRouter basename={basename} location={opts.location}>
       <Routes />
     </StaticRouter>

packages/server/src/ssr.ts

@@ -112,7 +112,8 @@ function createJSXGenerator(opts: CreateRequestHandlerOptions) {
       },
     });
 
-    const matches = matchRoutesForSSR(url, routes);
+    const matches = matchRoutesForSSR(url, routes, basename);
+
     if (matches.length === 0) {
       return;
     }
@@ -606,9 +607,19 @@ export function createAppRootElement(opts: CreateRequestHandlerOptions) {
   };
 }
 
-function matchRoutesForSSR(reqUrl: string, routesById: IRoutesById) {
+function matchRoutesForSSR(
+  reqUrl: string,
+  routesById: IRoutesById,
+  basename?: string,
+) {
+  // react-router-dom 在 v6.4.0 版本上增加了对 basename 结尾为斜杠的支持
+  // 目前 @umijs/server 依赖的 react-router-dom 版本为 v6.3.0
+  // 如果传入的 basename 结尾带斜杠, 比如 '/base/', 则会匹配不到.
+  // 日后如果依赖的版本升级, 此段代码可以删除.
+  const _basename = basename?.endsWith('/') ? basename.slice(0, -1) : basename;
+
   return (
-    matchRoutes(createClientRoutes({ routesById }), reqUrl)?.map(
+    matchRoutes(createClientRoutes({ routesById }), reqUrl, _basename)?.map(
       (route: any) => route.route.id,
     ) || []
   );