fix: router base not working for ssr and export static (#12140)

* fix: ssr exportStatic not handle with base

* fix: update pnpm-lock.yaml

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

* fix: 解决 exportStatic 文件冲突

* fix: 修复合并冲突导致的问题

* fix: 完善例子

* fix: 完善例子

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-basename/.umirc.ts

@@ -0,0 +1,5 @@
+export default {
+  ssr: {},
+  exportStatic: {},
+  base: '/base/',
+};

examples/ssr-basename/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@example/ssr-basename",
+  "private": true,
+  "description": "该案例用于测试 SSR 中带 basename 的情况. 在 dev 或 build 下, 服务端需要返回正确的 html 片段, 比如 a 标签需要有正确的 base 前缀",
+  "scripts": {
+    "build": "umi build",
+    "dev": "umi dev",
+    "setup": "umi setup",
+    "start": "npm run dev"
+  },
+  "dependencies": {
+    "umi": "workspace:*"
+  }
+}

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/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,11 +60,13 @@ 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 html = await markupRender(location);
     logger.info(`Pre-render for ${path}`);
     return html;
   } catch (err) {

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

@@ -562,6 +562,7 @@ if (process.env.NODE_ENV === 'development') {
             __INTERNAL_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
           ),
           mountElementId,
+          basename: api.config.base,
         },
       });
     }

packages/preset-umi/templates/server.tpl

@@ -61,8 +61,8 @@ const createOpts = {
   ServerInsertedHTMLContext,
   htmlPageOpts: {{{htmlPageOpts}}},
  __INTERNAL_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: {{{__INTERNAL_DO_NOT_USE_OR_YOU_WILL_BE_FIRED}}},
-  mountElementId: '{{{mountElementId}}}'
-
+  mountElementId: '{{{mountElementId}}}',
+  basename: '{{{basename}}}'
 };
 const requestHandler = createRequestHandler(createOpts);
 /**

packages/renderer-react/src/server.tsx

@@ -8,7 +8,7 @@ import { IRootComponentOptions } from './types';
 
 // Get the root React component for ReactDOMServer.renderToString
 export async function getClientRootComponent(opts: IRootComponentOptions) {
-  const basename = '/';
+  const basename = opts.basename || '/';
   const components = { ...opts.routeComponents };
   // todo 参数对齐
   const clientRoutes = createClientRoutes({
@@ -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/renderer-react/src/types.ts

@@ -77,6 +77,7 @@ export interface IRootComponentOptions extends IHtmlHydrateOptions {
   location: string;
   loaderData: { [routeKey: string]: any };
   manifest: any;
+  basename?: string;
 }
 
 export interface IHtmlProps extends IHtmlHydrateOptions {

packages/server/src/ssr.ts

@@ -54,6 +54,7 @@ interface CreateRequestHandlerOptions extends CreateRequestServerlessOptions {
     pureHtml: boolean;
   };
   mountElementId: string;
+  basename?: string;
 }
 
 interface IExecLoaderOpts {
@@ -93,6 +94,7 @@ function createJSXGenerator(opts: CreateRequestHandlerOptions) {
       getRoutes,
       createHistory,
       sourceDir,
+      basename,
     } = opts;
 
     // make import { history } from 'umi' work
@@ -110,7 +112,8 @@ function createJSXGenerator(opts: CreateRequestHandlerOptions) {
       },
     });
 
-    const matches = matchRoutesForSSR(url, routes);
+    const matches = matchRoutesForSSR(url, routes, basename);
+
     if (matches.length === 0) {
       return;
     }
@@ -169,6 +172,7 @@ function createJSXGenerator(opts: CreateRequestHandlerOptions) {
       __INTERNAL_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:
         opts.__INTERNAL_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
       mountElementId: opts.mountElementId,
+      basename,
     };
     const element = (await opts.getClientRootComponent(
       context,
@@ -603,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,
     ) || []
   );