@modern-js/main-doc 0.0.0-nightly-20230917160555 → 0.0.0-nightly-20230920160608

package/docs/en/guides/topic-detail/micro-frontend/c03-main-app.mdx

@@ -2,13 +2,14 @@
 sidebar_position: 3
 title: Develop Main App
 ---
+
 # Develop Main App
 
 In the previous [Experience micro frontend](/guides/topic-detail/micro-frontend/c02-development), an example was used to demonstrate how to create and configure micro frontend sub-applications. Through this chapter, you can further understand how to develop the main application, and its common configuration.
 
-After creating an application project through the `@modern-js/create` command, you can execute `pnpm run new` in the project (the `modern new` command is actually executed). After selecting the 「micro frontend」 mode, the micro frontend will be installed. Dependencies, just register the plugin manually.
+After creating an Modern.js project through the `@modern-js/create` command, you can execute `pnpm run new` in the project (the `modern new` command is actually executed). After selecting the 「micro frontend」 mode, the micro frontend will be installed. Dependencies, just register the plugin manually.
 
-import EnableMicroFrontend from "@site-docs-en/components/enable-micro-frontend";
+import EnableMicroFrontend from '@site-docs-en/components/enable-micro-frontend';
 
 <EnableMicroFrontend />
 
@@ -26,7 +27,7 @@ It can be configured at runtime via the API [defineConfig](/apis/app/runtime/app
 When the parameter is a function, it cannot be serialized to the output code, so please configure it through defineConfig when it comes to configuration such as functions
 :::
 
-import MicroRuntimeConfig from "@site-docs-en/components/micro-runtime-config";
+import MicroRuntimeConfig from '@site-docs-en/components/micro-runtime-config';
 
 <MicroRuntimeConfig />
 
@@ -40,15 +41,18 @@ defineConfig(App, {
     manifest: {
       getAppList: async () => {
         // get from remote api
-        return [{
-          name: 'Table',
-          entry: 'http://localhost:8001',
-          // activeWhen: '/table'
-        }, {
-          name: 'Dashboard',
-          entry: 'http://localhost:8002'
-          // activeWhen: '/dashboard'
-        }];
+        return [
+          {
+            name: 'Table',
+            entry: 'http://localhost:8001',
+            // activeWhen: '/table'
+          },
+          {
+            name: 'Dashboard',
+            entry: 'http://localhost:8002',
+            // activeWhen: '/dashboard'
+          },
+        ];
       },
     },
   },
@@ -77,16 +81,30 @@ Suppose our subapp list is configured as follows:
 ```js title="App.tsx"
 import { useModuleApps } from '@modern-js/plugin-garfish/runtime';
 
-import { RouterProvider, Route, createBrowserRouter, createRoutesFromElements, BrowserRouter, Link, Outlet } from '@modern-js/runtime/router';
+import {
+  RouterProvider,
+  Route,
+  createBrowserRouter,
+  createRoutesFromElements,
+  BrowserRouter,
+  Link,
+  Outlet,
+} from '@modern-js/runtime/router';
 
 const AppLayout = () => (
   <>
-    <div><Link to={'/table'}>load file-based sub-app</Link></div>
-    <div><Link to={'/dashboard'}>load self-controlled sub-app</Link></div>
-    <div><Link to={'/'}>unmount sub-app</Link></div>
+    <div>
+      <Link to={'/table'}>load file-based sub-app</Link>
+    </div>
+    <div>
+      <Link to={'/dashboard'}>load self-controlled sub-app</Link>
+    </div>
+    <div>
+      <Link to={'/'}>unmount sub-app</Link>
+    </div>
     <Outlet />
   </>
-)
+);
 
 export default () => {
   const { apps, MApp } = useModuleApps();
@@ -103,25 +121,25 @@ export default () => {
               key={app.name}
               path={`${app.name.toLowerCase()}/*`}
               element={
-              <Component
-                loadable={{
-                  loading: ({ pastDelay, error }: any) => {
-                    if (error) {
-                      return <div>error: {error?.message}</div>;
-                    } else if (pastDelay) {
-                      return <div>loading</div>;
-                    } else {
-                      return null;
-                    }
-                  },
-                }}
-              />
+                <Component
+                  loadable={{
+                    loading: ({ pastDelay, error }: any) => {
+                      if (error) {
+                        return <div>error: {error?.message}</div>;
+                      } else if (pastDelay) {
+                        return <div>loading</div>;
+                      } else {
+                        return null;
+                      }
+                    },
+                  }}
+                />
               }
             />
-          )
+          );
         })}
-      </Route>
-    )
+      </Route>,
+    ),
   );
 
   return (
@@ -164,13 +182,10 @@ function App() {
 
 After starting the application in this way, accessing the '/table' route will render the'Table 'sub-application, and accessing the'/dashboard 'route will render the'Dashboard' sub-application.
 
-
 ### Mix Mode
 
-
 Of course, **sub-application components** and **centralized routing** can be mixed.
 
-
 - One molecular application is activated as a **sub-application component**, and the other part is activated as a **centralized routing**.
 - A molecular application can be activated either as a **centralized routing** or as a **sub-application component**.
 
@@ -178,7 +193,6 @@ Of course, **sub-application components** and **centralized routing** can be mix
 
 By configuring the `loadable` configuration, loading components can be added for 「centralized routing」 and 「sub-applicati」, and errors, timeouts, flashes, etc. can be considered, so as to provide users with a better user experience. The design and implementation of this function refer to [react-loadable](https://github.com/jamiebuilds/react-loadable), and the basic functions are similar.
 
-
 ```tsx
 function Loading() {
   return <div>Loading...</div>;

package/docs/en/guides/topic-detail/micro-frontend/c04-communicate.mdx

@@ -2,6 +2,7 @@
 sidebar_position: 4
 title: Communicate
 ---
+
 # Communicate
 
 ## Props

package/docs/en/guides/topic-detail/micro-frontend/c05-mixed-stack.mdx

@@ -2,6 +2,7 @@
 sidebar_position: 5
 title: Mixed Stack
 ---
+
 # Mixed Stack
 
 The Modern.js micro frontend scheme is based on the [Garfish](https://garfishjs.org/) package and provides some more out-of-the-box usage.
@@ -16,7 +17,6 @@ When your main application and sub-application are not all Modern.js application
 **Modern.js** subapps compile to generate a standard [Garfish subapp export](https://www.garfishjs.org/guide/start#2%E5%AF%BC%E5%87%BA-provider-%E5%87%BD%E6%95%B0).
 So you can directly access the standard micro frontend main application.
 
-
 :::info
 The child application is **Modern.js**, when the main application uses the native Garfish micro frontend, the **child application debugging mode** is not available.
 :::

package/docs/en/tutorials/first-app/c02-component.mdx

@@ -1,6 +1,7 @@
 ---
 title: Add UI Components
 ---
+
 # Add UI Components
 
 In the previous chapter, we learned how to initialize a project and use configuration to modify the default behavior of Modern.js.
@@ -9,9 +10,9 @@ In this chapter, we continue to use the project code of the previous chapter and
 
 In order to do better UI display and interaction, we introduce the component library [Antd](https://ant.design/index-cn) to develop, and use the `<List>` component instead of the primitive list. Add dependency first:
 
-```bash
-pnpm add antd
-```
+import { PackageManagerTabs } from '@theme';
+
+<PackageManagerTabs command="add antd" />
 
 Modify `src/routes/page.tsx` to import components at the top:
 

package/docs/zh/apis/app/commands.mdx

@@ -30,7 +30,6 @@ Options:
 $ modern dev
 
 info    Starting dev server...
-info    App running at:
 
   > Local:    http://localhost:8080/
   > Network:  http://192.168.0.1:8080/
@@ -88,12 +87,14 @@ Options:
 
 ```
 Bundle Analyzer saved report to /example/dist/report.html
-File sizes after production build:
 
-  122.35 KB  dist/static/js/885.1d4fbe5a.js
-  2.3 KB     dist/static/js/main.4b8e8d64.js
-  761 B      dist/static/js/runtime-main.edb7cf35.js
-  645 B      dist/static/css/main.0dd3ecc1.css
+info    Production file sizes:
+
+  File                                      Size         Gzipped
+  dist/static/js/lib-react.09721b5c.js      152.6 kB     49.0 kB
+  dist/html/main/index.html                 5.8 kB       2.5 kB
+  dist/static/js/main.3568a38e.js           3.5 kB       1.4 kB
+  dist/static/css/main.03221f72.css         1.4 kB       741 B
 ```
 
 手动在浏览器中打开上述 HTML 文件，可以看到打包产物的瓦片图，并进行包体积分析和优化：
@@ -123,7 +124,7 @@ Options:
 
 ### 添加入口
 
-在应用工程中，执行 `new` 命令添加入口如下：
+在 Modern.js 工程中，执行 `new` 命令添加入口的步骤如下：
 
 ```bash
 $ npx modern new
@@ -134,7 +135,7 @@ $ npx modern new
 
 ### 启用可选功能
 
-在应用工程中，执行 `new` 命令启用可选能力如下：
+在 Modern.js 工程中，执行 `new` 命令启用可选能力的步骤如下：
 
 ```bash
 $ npx modern new
@@ -156,7 +157,7 @@ pnpm 暂不支持使用 JSON 字符串作为参数值，可使用 `npm new` 开
 
 ## modern serve
 
-`modern serve` 命令用于在生产环境下启用应用工程, 注意需要提前执行 [`build`](/apis/app/commands#modern-build) 命令构建出对应产物。
+`modern serve` 命令用于在生产环境下启动 Modern.js 工程, 也可以用于在本地预览生产环境构建的产物。注意你需要提前执行 [`build`](/apis/app/commands#modern-build) 命令构建出对应产物。
 
 ```bash
 Usage: modern serve [options]

package/docs/zh/apis/app/hooks/api/api.mdx

@@ -2,6 +2,7 @@
 title: '**/*.[tj]s'
 sidebar_position: 1
 ---
+
 # **/*.[tj]s
 
 在 [BFF 函数写法](/guides/advanced-features/bff/type.html#函数写法)下，声明 API 路由的文件。除了[某些约定文件](/apis/app/hooks/api/api#白名单)外，`api` 目录下的文件会被注册为接口的路由。
@@ -66,7 +67,7 @@ export const get = async () => {
 
 这样导出函数，则会得到一个 `GET` 接口。
 
-应用工程中支持了 9 个 Method 定义，即：`GET`、`POST`、`PUT`、`DELETE`、`CONNECT`、`TRACE`、`PATCH`、`OPTION`、`HEAD`，即可以用这些 Method 作为函数导出的名字。
+Modern.js 工程中支持了 9 个 Method 定义，即：`GET`、`POST`、`PUT`、`DELETE`、`CONNECT`、`TRACE`、`PATCH`、`OPTION`、`HEAD`，即可以用这些 Method 作为函数导出的名字。
 
 名字是大小不敏感的，就是说，如果是 `GET`，写成 `get`、`Get`、`GEt`、`GET`，都可以准确识别。而默认导出，即 `export default xxx` 则会被映射为 `Get`。
 

package/docs/zh/apis/app/hooks/server/index_.mdx

@@ -2,8 +2,9 @@
 title: index.[tj]s
 sidebar_position: 1
 ---
+
 # index.[tj]s
 
-扩展 Modern.js Web Server 的文件，在此文件中可以给应用工程启动的 Web Server 添加 [Hook](/apis/app/runtime/web-server/hook) 或 [Middleware](/apis/app/runtime/web-server/middleware)。
+扩展 Modern.js Web Server 的文件，在此文件中可以给 Modern.js 工程启动的 Web Server 添加 [Hook](/apis/app/runtime/web-server/hook) 或 [Middleware](/apis/app/runtime/web-server/middleware)。
 
 可以对请求和响应进行拦截处理，鉴权与角色、请求预处理、异常兜底等。也可在内置处理逻辑（包括路由匹配、资源寻址、头部注入、页面渲染，静态 Web 托管）插入特定的业务逻辑。

package/docs/zh/components/debug-app.mdx

@@ -6,12 +6,10 @@ $ pnpm run dev
 > modern dev
 
 info    Starting dev server...
-info    App running at:
+ready   Client compiled in 50ms
 
   > Local:    http://localhost:8080/
   > Network:  http://192.168.0.1:8080/
-
- Client ✔ done in 76.10ms
 ```
 
 在浏览器中打开 `http://localhost:8000/`，可以看到页面内容。

package/docs/zh/components/global-proxy-config.mdx

@@ -7,16 +7,9 @@
 
 使用该选项前，你需要提前安装和注册 `@modern-js/plugin-proxy` 插件：
 
-```bash
-# npm
-npm add @modern-js/plugin-proxy -D
-
-# yarn
-yarn add @modern-js/plugin-proxy -D
+import { PackageManagerTabs } from '@theme';
 
-# pnpm
-pnpm add @modern-js/plugin-proxy -D
-```
+<PackageManagerTabs command="add @modern-js/plugin-proxy -D" />
 
 安装完成后，在 `modern.config.ts` 文件中注册插件：
 
@@ -75,13 +68,11 @@ module.exports = {
 执行 `dev`, 提示如下时，即代理服务器启动成功：
 
 ```bash
-  App running at:
-
   Local:    http://localhost:8080/
   Network:  http://192.168.0.1:8080/
 
-ℹ  info      Starting the proxy server.....
-✔  success   Proxy Server start on localhost:8899
+info      Starting proxy server.....
+success   Proxy server start on localhost:8899
 ```
 
 访问 `localhost:8899`, 可以在 UI 界面上查看 Network 以及配置代理规则：

package/docs/zh/components/global-proxy.mdx

@@ -11,13 +11,11 @@ Modern.js 提供了开箱即用的全局代理插件 `@modern-js/plugin-proxy`
 安装代理插件并配置代理规则后， 执行 `pnpm run dev` 命令：
 
 ```bash
-  App running at:
-
   Local:    http://localhost:8080/
   Network:  http://192.168.0.1:8080/
 
-ℹ  info      Starting the proxy server.....
-✔  success   Proxy Server start on localhost:8899
+info      Starting proxy server.....
+success   Proxy server start on localhost:8899
 ```
 
 在控制台中可以看到代理服务器成功启动。

package/docs/zh/configure/app/server/base-url.mdx

@@ -25,8 +25,6 @@ export default defineConfig({
 `dev` 之后可以看到路由访问会加上对应前缀:
 
 ```bash
-App running at:
-
   > Local:    http://localhost:8080/base/
   > Network:  http://192.168.0.1:8080/base/
 ```

package/docs/zh/guides/basic-features/alias.mdx

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 3
+sidebar_position: 4
 ---
 
 # 路径别名

package/docs/zh/guides/basic-features/css.mdx

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 2
+sidebar_position: 1
 ---
 
 # 样式开发
@@ -61,16 +61,31 @@ Modern.js 内部集成了 Babel 的 [babel-plugin-styled-components](https://git
 
 ## 使用 Tailwind CSS
 
-[Tailwind CSS](https://tailwindcss.com/) 是一个以 Utility Class 为基础的 CSS 框架和设计系统，可以快速地为组件添加常用样式，同时支持主题样式的灵活扩展。在 Modern.js 中使用 [Tailwind CSS](https://tailwindcss.com/)，只需要在项目根目录下执行 `pnpm run new` 并开启。
+[Tailwind CSS](https://tailwindcss.com/) 是一个以 Utility Class 为基础的 CSS 框架和设计系统，可以快速地为组件添加常用样式，同时支持主题样式的灵活扩展。
 
-按照如下进行选择：
+在 Modern.js 中使用 [Tailwind CSS](https://tailwindcss.com/)，你只需要按照以下步骤操作：
+
+1. 在项目根目录下执行 `pnpm run new`，按照如下进行选择：
 
 ```text
 ? 请选择你想要的操作 启用可选功能
 ? 请选择功能名称 启用 「Tailwind CSS」 支持
 ```
 
-在 `modern.config.ts` 中注册 Tailwind 插件:
+成功开启后，会看到 `package.json` 中新增了依赖：
+
+```json title="./package.json"
+{
+  "dependencies": {
+    "tailwindcss": "^3.0.0"
+  },
+  "devDependencies": {
+    "@modern-js/plugin-tailwindcss": "^2.0.0"
+  }
+}
+```
+
+2. 在 `modern.config.ts` 中注册 Tailwind 插件:
 
 ```ts title="modern.config.ts"
 import { tailwindcssPlugin } from '@modern-js/plugin-tailwindcss';
@@ -80,29 +95,34 @@ export default defineConfig({
 });
 ```
 
-使用时在入口的根组件(如 `src/App.jsx`)添加如下代码：
+3. 创建 `index.css` 文件，添加以下代码：
+
+```css title="index.css"
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+:::info
+根据需求不同，你可以选择性地导入 Tailwind CSS 提供的 CSS 样式。请参考 [`@tailwind` 文档](https://tailwindcss.com/docs/functions-and-directives#tailwind) 来了解 `@tailwind` 指令的详细用法。
+:::
+
+4. 引用 `index.css` 文件，比如在入口的根组件 `src/App.jsx` 添加如下代码：
 
 ```js
-import 'tailwindcss/base.css';
-import 'tailwindcss/components.css';
-import 'tailwindcss/utilities.css';
+import './index.css';
 ```
 
-然后即可在各个组件中使用 Tailwind CSS 提供的 Utility Class 了：
+5. 然后即可在各个组件中使用 Tailwind CSS 提供的 Utility Class 了：
 
 ```tsx
-const App = () => (
+const Hello = () => (
   <div className="h-12 w-48">
     <p className="text-xl font-medium text-black">hello world</p>
   </div>
 );
 ```
 
-:::info 补充信息
-根据需求不同，你可以选择性的导入 Tailwind CSS 提供的 CSS 文件。由于使用 `@tailwind` 与直接导入 CSS 文件的作用等价，因此关于 Tailwind CSS 提供的 CSS 文件的用途，可以参考 [`@tailwind` 的使用](https://tailwindcss.com/docs/functions-and-directives#tailwind) 文档中注释里的内容。
-
-:::
-
 ### 配置 Tailwind CSS
 
 在 Modern.js 中，你有两种方式来配置 Tailwind CSS：

package/docs/zh/guides/basic-features/data-fetch.mdx

@@ -1,10 +1,11 @@
 ---
-sidebar_position: 4
+title: 数据获取
+sidebar_position: 3
 ---
 
 # 数据获取
 
-Modern.js 中提供了开箱即用的数据获取能力，开发者可以通过这些 API，在 CSR 和 SSR 环境同构的进行开发。
+Modern.js 中提供了开箱即用的数据获取能力，开发者可以通过这些 API，在项目中获取数据。
 
 需要注意的是，这些 API 并不帮助应用发起请求，而是帮助开发者更好地管理数据，提升项目的性能。
 
@@ -216,26 +217,25 @@ export default function UserLayout() {
 
 :::info
 此功能目前是实验性质，后续 API 可能有调整。
-目前仅支持 CSR，敬请期待 Streaming SSR。
 
 :::
 
 创建 `user/layout.loader.ts`，并添加以下代码：
 
 ```ts title="routes/user/layout.loader.ts"
-import { defer } from "@modern-js/runtime/router"
+import { defer } from '@modern-js/runtime/router';
 
 const loader = () =>
-defer({
-  userInfo: new Promise((resolve) => {
+  defer({
+    userInfo: new Promise(resolve => {
       setTimeout(() => {
         resolve({
           age: 1,
-          name: 'user layout'
-        })
-      }, 1000)
-    })
-  })
+          name: 'user layout',
+        });
+      }, 1000);
+    }),
+  });
 
 export default loader;
 ```
@@ -346,7 +346,6 @@ export default async (): Promise<ProfileData> => {
 
 在 SSR 项目中，每个 `loader` 也是一个服务端接口，我们推荐使用 `loader` 替代 http method 为 `get` 的 BFF 函数，作为接口层，避免多一层转发和执行。
 
-
 ## useLoader（旧版）
 
 **`useLoader`** 是 Modern.js 老版本中的 API。该 API 是一个 React Hook，专门提供给 SSR 应用使用，让开发者能同构的在组件中获取数据。

package/docs/zh/guides/basic-features/html.mdx

@@ -135,7 +135,7 @@ export default function Document(): React.ReactElement {
       <!--<?- html ?>-->
       <h1 style="color:red">以下为构建时传过来的参数：</h1>
       <h2>entryName: sub</h2>
-      <h2>title: </h2>
+      <h2>title:</h2>
       <h2>rootId: root</h2>
     </div>
     <h1>bottom</h1>
@@ -166,12 +166,11 @@ export default function Document(): React.ReactElement {
 }
 ```
 
+## HTML 语法
 
-## Html 语法
+Modern.js 也支持通过 HTML(EJS) 语法来生成 HTML 文件。
 
-Modern.js 也支持 HTML 语法。默认情况下，Modern.js 的应用工程中会内置一份 HTML 模板，用于生成 HTML 代码。
-
-基于 HTML 语法的模板，Modern.js 提供了**自定义 HTML 片段**和**完全自定义 HTML 模板**两种方式来自定义模板。
+默认情况下，Modern.js 的工程中会内置一份 HTML 模板，用于生成 HTML 代码。如果你需要自定义 HTML 模板，可以使用**自定义 HTML 片段**和**完全自定义 HTML 模板**两种方式。
 
 ### 自定义 HTML 片段
 

package/docs/zh/guides/basic-features/routes.mdx

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 1
+sidebar_position: 2
 ---
 
 # 路由方案
@@ -151,13 +151,13 @@ export default () => {
 
 #### Config
 
-每个 `Layout` 或 `Page` 文件都可以定义一个自己的 `config` 文件，如 `page.config.ts`，该文件中我们约定了一个具名导出 `handle`，
+每个 `Layout`, `$` 或 `Page` 文件都可以定义一个自己的 `config` 文件，如 `page.config.ts`，该文件中我们约定了一个具名导出 `handle`，
 这个字段中你可以定义任意属性：
 
 ```ts title="routes/page.config.ts"
 export const handle = {
-  breadcrumbName: 'profile'
-}
+  breadcrumbName: 'profile',
+};
 ```
 
 定义的这些属性可以通过 [`useMatches`](https://reactrouter.com/en/main/hooks/use-matches) hook 获取：
@@ -165,15 +165,13 @@ export const handle = {
 ```ts title="routes/layout.ts"
 export default () => {
   const matches = useMatches;
-  const breadcrumbs = matches.map(matchedRoute => matchedRoute?.handle?.breadcrumbName);
-  return (
-    <Breadcrumb names={breadcrumbs}>
-    </Breadcrumb>
-  )
-}
+  const breadcrumbs = matches.map(
+    matchedRoute => matchedRoute?.handle?.breadcrumbName,
+  );
+  return <Breadcrumb names={breadcrumbs}></Breadcrumb>;
+};
 ```
 
-
 ### 动态路由
 
 通过 `[]` 命名的文件目录，生成的路由会作为动态路由。例如以下文件目录：
@@ -233,6 +231,7 @@ export default () => {
 ```
 
 当访问任何匹配不到的路径时(如 `/blog/a`)，都会渲染 `routes/$.tsx` 组件，因为这里有 `layout.tsx`，渲染的 UI 如下：
+
 ```tsx
 <RootLayout>
   <BlogLayout>
@@ -254,7 +253,6 @@ params['*']; // => 'aaa/bbb'
 
 `$.tsx` 可以加入到 `routes` 目录下的任意目录中，一个常见的使用示例是添加 `routes/$.tsx` 文件去定制任意层级的 404 内容。
 
-
 ### 无路径布局
 
 当目录名以 \_\_ 开头时，对应的目录名不会转换为实际的路由路径，例如以下文件目录：
@@ -368,6 +366,17 @@ export default () => {
 };
 ```
 
+在组件内做重定向，则可以通过 `useNavigate` hook，示例如下：
+
+```ts title="routes/user/page.ts"
+import { useNavigate } from '@modern-js/runtime/router';
+
+export default () => {
+  const navigate = useNavigate();
+  navigate('/login');
+};
+```
+
 ### 错误处理
 
 `routes/` 下每一层目录中，开发者同样可以定义一个 `error.tsx` 文件，默认导出一个 `<ErrorBoundary>` 组件。
@@ -493,6 +502,7 @@ export const init = (context: RuntimeContext) => {
 ```
 
 :::info
+
 - 该功能目前仅在 Webpack 项目中支持，Rspack 项目暂不支持。
 - 对数据的预加载目前只会预加载 SSR 项目中 [Data Loader](/guides/basic-features/data-fetch) 中返回的数据。
 
@@ -512,14 +522,13 @@ export const init = (context: RuntimeContext) => {
 - 使用 `render`，仅在空闲时对静态资源进行加载，不会与首屏静态资源抢占网络。
 - 在 SSR 场景下，也会对数据进行预取。
 
-import Motivation from '@site-docs/components/convention-routing-motivation'
-
-<Motivation/>
+import Motivation from '@site-docs/components/convention-routing-motivation';
 
-import Practice from '@site-docs/components/routes-practice'
+<Motivation />
 
-<Practice/>
+import Practice from '@site-docs/components/routes-practice';
 
+<Practice />
 
 ## 自控式路由
 
@@ -569,5 +578,3 @@ export default defineConfig({
 ```
 
 如上述配置， 如果关闭了 [`runtime.router`](/configure/app/runtime/router) 配置，并直接使用 `react-router-dom` 进行项目路由管理时，还需要根据 React Router 文档自行包裹 `Provider`。
-
-