fix: ambiguous relative link problem in md (#1491)

Author: PeachScript

src/features/compile/index.ts

@@ -42,7 +42,7 @@ export default (api: IApi) => {
       resolve: api.config.resolve,
       extraRemarkPlugins: api.config.extraRemarkPlugins,
       extraRehypePlugins: api.config.extraRehypePlugins,
-      routers: api.appData.routes,
+      routes: api.appData.routes,
     };
 
     memo.module

src/features/tabs.ts

@@ -21,6 +21,10 @@ export function getTabKeyFromFile(file: string) {
   return file.match(/\$tab-([^.]+)/)![1];
 }
 
+export function getHostForTabRouteFile(file: string) {
+  return file.replace(/\$tab-[^.]+\./, '');
+}
+
 /**
  * plugin for add conventional tab and plugin tab into page content
  */

src/loaders/markdown/transformer/index.ts

@@ -61,7 +61,7 @@ export interface IMdTransformerOptions {
   resolve: IDumiConfig['resolve'];
   extraRemarkPlugins?: IDumiConfig['extraRemarkPlugins'];
   extraRehypePlugins?: IDumiConfig['extraRehypePlugins'];
-  routers: Record<string, IRoute>;
+  routes: Record<string, IRoute>;
 }
 
 export interface IMdTransformerResult {
@@ -147,7 +147,7 @@ export default async (raw: string, opts: IMdTransformerOptions) => {
     .use(rehypeSlug)
     .use(rehypeLink, {
       fileAbsPath: opts.fileAbsPath,
-      routers: opts.routers,
+      routes: opts.routes,
     })
     .use(rehypeAutolinkHeadings)
     .use(rehypeIsolation)

src/loaders/markdown/transformer/rehypeLink.ts

@@ -1,6 +1,7 @@
+import { getHostForTabRouteFile } from '@/features/tabs';
 import type { Root } from 'hast';
 import path from 'path';
-import { lodash, winPath } from 'umi/plugin-utils';
+import { lodash, logger, winPath } from 'umi/plugin-utils';
 import type { Transformer } from 'unified';
 import url from 'url';
 import type { IMdTransformerOptions } from '.';
@@ -13,10 +14,7 @@ let SKIP: typeof import('unist-util-visit').SKIP;
   ({ visit, SKIP } = await import('unist-util-visit'));
 })();
 
-type IRehypeLinkOptions = Pick<
-  IMdTransformerOptions,
-  'fileAbsPath' | 'routers'
->;
+type IRehypeLinkOptions = Pick<IMdTransformerOptions, 'fileAbsPath' | 'routes'>;
 
 export default function rehypeLink(
   opts: IRehypeLinkOptions,
@@ -26,22 +24,55 @@ export default function rehypeLink(
       if (node.tagName === 'a' && typeof node.properties?.href === 'string') {
         const href = node.properties.href;
         const parsedUrl = url.parse(href);
+        const hostAbsPath = getHostForTabRouteFile(opts.fileAbsPath);
 
         // handle internal link
         if (parsedUrl.hostname) return SKIP;
 
-        // handle markdown link
         if (/\.md$/i.test(parsedUrl.pathname!)) {
-          const { routers } = opts;
+          // handle markdown link
+          const { routes } = opts;
           const absPath = winPath(
-            path.resolve(opts.fileAbsPath, '..', parsedUrl.pathname!),
+            path.resolve(hostAbsPath, '..', parsedUrl.pathname!),
           );
 
-          Object.keys(routers).forEach((key) => {
-            if (routers[key].file === absPath) {
-              parsedUrl.pathname = routers[key].absPath;
+          Object.keys(routes).forEach((key) => {
+            if (routes[key].file === absPath) {
+              parsedUrl.pathname = routes[key].absPath;
             }
           });
+        } else if (
+          /^\.?\.\//.test(parsedUrl.pathname!) ||
+          /^(\w+:)?\/\//.test(parsedUrl.pathname!)
+        ) {
+          // handle relative link
+          // transform relative link to absolute link
+          // because react-router@6 and HTML href are different in processing relative link
+          // e.g. in /a page, <Link to="./b">b</Link> will be resolved to /a/b in react-router@6
+          //      but will be resolved to /b in <a href="./b">b</a>
+          const routes = Object.values(opts.routes);
+          const basePath = routes.find(
+            (route) => route.file === hostAbsPath,
+          )!.absPath;
+          const htmlTargetPath = url.resolve(basePath, parsedUrl.pathname!);
+          const rr6TargetPath = winPath(
+            path.resolve(basePath, parsedUrl.pathname!),
+          );
+
+          // use html way first
+          parsedUrl.pathname = htmlTargetPath;
+
+          // warn if user already use react-router@6 way
+          if (
+            routes.every((route) => route.absPath !== htmlTargetPath) &&
+            routes.some((route) => route.absPath === rr6TargetPath)
+          ) {
+            parsedUrl.pathname = rr6TargetPath;
+            logger.warn(
+              `Detected ambiguous link \`${href}\` in \`${opts.fileAbsPath}\`, please use \`./xxx.md\` file path instead of normal relative path, dumi will deprecate this behavior in the future.
+        See more: https://github.com/umijs/dumi/pull/1491`,
+            );
+          }
         }
 
         parent!.children.splice(i!, 1, {