feat: add transition router feature

docs/docs/api/config.md

@@ -1442,6 +1442,15 @@ theme: { '@primary-color': '#1DA57A' }
 
 配置全局页面 title，暂时只支持静态的 Title。
 
+## transitionRouter
+
+- 类型：`object`
+- 默认值：`null`
+
+仅 React 18 可用。
+
+在切换页面时自动使用 `startTransition` 标记为非紧急更新，这可以避免 loading 态突然出现又消失的闪烁效果等[问题](https://react.dev/reference/react/Suspense#preventing-already-revealed-content-from-hiding)，提升用户体验。
+
 ## verifyCommit
 
 - 类型：`{ scope: string[]; allowEmoji: boolean }`

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

@@ -0,0 +1,55 @@
+import { winPath } from '@umijs/utils';
+import { join } from 'path';
+import type { IApi } from '../../types';
+
+export default (api: IApi) => {
+  api.describe({
+    config: {
+      schema({ zod }) {
+        return zod.object({});
+      },
+    },
+    enableBy: api.EnableBy.config,
+  });
+
+  api.onGenerateFiles(() => {
+    if (api.userConfig.mpa || api.config.mpa) {
+      throw new Error('transitionRouter plugin does not support mpa mode');
+    }
+    if (api.appData.framework !== 'react') {
+      throw new Error('transitionRouter plugin only support react framework');
+    }
+    const isReact18 = (
+      api.appData.react?.version as string | undefined
+    )?.startsWith('18');
+    if (!isReact18) {
+      throw new Error('transitionRouter plugin only support react@18');
+    }
+
+    // https://github.com/remix-run/remix/issues/5763
+    api.writeTmpFile({
+      path: 'runtime.ts',
+      content: `
+import { startTransition } from 'react';
+
+export const modifyClientRenderOpts = (context) => {
+  const h = context.history
+  const originPush = h.push
+  const originReplace = h.replace
+  h.push = (...args) => {
+    startTransition(() => originPush.apply(h, args))
+  }
+  h.replace = (...args) => {
+    startTransition(() => originReplace.apply(h, args))
+  }
+  return context
+}
+`,
+    });
+  });
+
+  const pluginDir = `plugin-${api.plugin.key}`;
+  api.addRuntimePlugin(() => [
+    winPath(join(api.paths.absTmpPath, `${pluginDir}/runtime.ts`)),
+  ]);
+};

packages/preset-umi/src/index.ts

@@ -57,6 +57,7 @@ export default () => {
       require.resolve('./features/swc/swc'),
       require.resolve('./features/ui/ui'),
       require.resolve('./features/hmrGuardian/hmrGuardian'),
+      require.resolve('./features/transitionRouter/transitionRouter'),
 
       // commands
       require.resolve('./commands/build'),