@modern-js/main-doc 2.0.0-beta.2 → 2.0.0-beta.3

package/zh/configure/app/source/exclude.md

@@ -4,7 +4,7 @@ sidebar_label: exclude
 ---
 
 :::info BUILDER
-该配置为 Modern.js Builder 配置，可能存在无法跳转的链接。详细信息可参考 [source.exclude](https://modernjs.dev/builder/zh/api/config-source.html#source-exclude)。
+该配置为 Modern.js Builder 配置，详细信息可参考 [source.exclude](https://modernjs.dev/builder/zh/api/config-source.html#source-exclude)。
 :::
 
 import Main from '@modern-js/builder-doc/zh/config/source/exclude.md'

package/zh/configure/app/source/global-vars.md

@@ -4,7 +4,7 @@ sidebar_label: globalVars
 ---
 
 :::info BUILDER
-该配置为 Modern.js Builder 配置，可能存在无法跳转的链接。详细信息可参考 [source.globalVars](https://modernjs.dev/builder/zh/api/config-source.html#source-globalvars)。
+该配置为 Modern.js Builder 配置，详细信息可参考 [source.globalVars](https://modernjs.dev/builder/zh/api/config-source.html#source-globalvars)。
 :::
 
 import Main from '@modern-js/builder-doc/zh/config/source/globalVars.md'

package/zh/configure/app/source/include.md

@@ -4,7 +4,7 @@ sidebar_label: include
 ---
 
 :::info BUILDER
-该配置为 Modern.js Builder 配置，可能存在无法跳转的链接。详细信息可参考 [source.include](https://modernjs.dev/builder/zh/api/config-source.html#source-include)。
+该配置为 Modern.js Builder 配置，详细信息可参考 [source.include](https://modernjs.dev/builder/zh/api/config-source.html#source-include)。
 :::
 
 import Main from '@modern-js/builder-doc/zh/config/source/include.md'

package/zh/configure/app/source/module-scopes.md

@@ -4,7 +4,7 @@ sidebar_label: moduleScopes
 ---
 
 :::info BUILDER
-该配置为 Modern.js Builder 配置，可能存在无法跳转的链接。详细信息可参考 [source.moduleScopes](https://modernjs.dev/builder/zh/api/config-source.html#source-modulescopes)。
+该配置为 Modern.js Builder 配置，详细信息可参考 [source.moduleScopes](https://modernjs.dev/builder/zh/api/config-source.html#source-modulescopes)。
 :::
 
 import Main from '@modern-js/builder-doc/zh/config/source/moduleScopes.md'

package/zh/configure/app/source/pre-entry.md

@@ -4,7 +4,7 @@ sidebar_label: preEntry
 ---
 
 :::info BUILDER
-该配置为 Modern.js Builder 配置，可能存在无法跳转的链接。详细信息可参考 [source.preEntry](https://modernjs.dev/builder/zh/api/config-source.html#source-preentry)。
+该配置为 Modern.js Builder 配置，详细信息可参考 [source.preEntry](https://modernjs.dev/builder/zh/api/config-source.html#source-preentry)。
 :::
 
 import Main from '@modern-js/builder-doc/zh/config/source/preEntry.md'

package/zh/configure/app/source/resolve-extension-prefix.md

@@ -4,7 +4,7 @@ sidebar_label: resolveExtensionPrefix
 ---
 
 :::info BUILDER
-该配置为 Modern.js Builder 配置，可能存在无法跳转的链接。详细信息可参考 [source.resolveExtensionPrefix](https://modernjs.dev/builder/zh/api/config-source.html#source-resolveextensionprefix)。
+该配置为 Modern.js Builder 配置，详细信息可参考 [source.resolveExtensionPrefix](https://modernjs.dev/builder/zh/api/config-source.html#source-resolveextensionprefix)。
 :::
 
 import Main from '@modern-js/builder-doc/zh/config/source/resolveExtensionPrefix.md'

package/zh/configure/app/source/resolve-main-fields.md

@@ -4,7 +4,7 @@ sidebar_label: resolveMainFields
 ---
 
 :::info BUILDER
-该配置为 Modern.js Builder 配置，可能存在无法跳转的链接。详细信息可参考 [source.resolveMainFields](https://modernjs.dev/builder/zh/api/config-source.html#source-resolvemainfields)。
+该配置为 Modern.js Builder 配置，详细信息可参考 [source.resolveMainFields](https://modernjs.dev/builder/zh/api/config-source.html#source-resolvemainfields)。
 :::
 
 import Main from '@modern-js/builder-doc/zh/config/source/resolveMainFields.md'

package/zh/configure/app/tools/autoprefixer.md

@@ -4,7 +4,7 @@ sidebar_label: autoprefixer
 ---
 
 :::info BUILDER
-该配置为 Modern.js Builder 配置，可能存在无法跳转的链接。详细信息可参考 [tools.autoprefixer](https://modernjs.dev/builder/zh/api/config-tools.html#tools-autoprefixer)。
+该配置为 Modern.js Builder 配置，详细信息可参考 [tools.autoprefixer](https://modernjs.dev/builder/zh/api/config-tools.html#tools-autoprefixer)。
 :::
 
 import Main from '@modern-js/builder-doc/zh/config/tools/autoprefixer.md'

package/zh/configure/app/tools/babel.md

@@ -4,7 +4,7 @@ sidebar_label: babel
 ---
 
 :::info BUILDER
-该配置为 Modern.js Builder 配置，可能存在无法跳转的链接。详细信息可参考 [tools.babel](https://modernjs.dev/builder/zh/api/config-tools.html#tools-babel)。
+该配置为 Modern.js Builder 配置，详细信息可参考 [tools.babel](https://modernjs.dev/builder/zh/api/config-tools.html#tools-babel)。
 :::
 
 import Main from '@modern-js/builder-doc/zh/config/tools/babel.md'

package/zh/configure/app/tools/css-extract.md

@@ -4,7 +4,7 @@ sidebar_label: cssExtract
 ---
 
 :::info BUILDER
-该配置为 Modern.js Builder 配置，可能存在无法跳转的链接。详细信息可参考 [tools.cssExtract](https://modernjs.dev/builder/zh/api/config-tools.html#tools-cssextract)。
+该配置为 Modern.js Builder 配置，详细信息可参考 [tools.cssExtract](https://modernjs.dev/builder/zh/api/config-tools.html#tools-cssextract)。
 :::
 
 import Main from '@modern-js/builder-doc/zh/config/tools/cssExtract.md'

package/zh/configure/app/tools/css-loader.md

@@ -4,7 +4,7 @@ sidebar_label: cssLoader
 ---
 
 :::info BUILDER
-该配置为 Modern.js Builder 配置，可能存在无法跳转的链接。详细信息可参考 [tools.cssLoader](https://modernjs.dev/builder/zh/api/config-tools.html#tools-cssloader)。
+该配置为 Modern.js Builder 配置，详细信息可参考 [tools.cssLoader](https://modernjs.dev/builder/zh/api/config-tools.html#tools-cssloader)。
 :::
 
 import Main from '@modern-js/builder-doc/zh/config/tools/cssLoader.md'

package/zh/configure/app/tools/dev-server.md

@@ -4,7 +4,7 @@ sidebar_label: devServer
 ---
 
 :::info BUILDER
-该配置为 Modern.js Builder 配置，可能存在无法跳转的链接。详细信息可参考 [tools.devServer](https://modernjs.dev/builder/zh/api/config-tools.html#tools-devserver)。
+该配置为 Modern.js Builder 配置，详细信息可参考 [tools.devServer](https://modernjs.dev/builder/zh/api/config-tools.html#tools-devserver)。
 :::
 
 import Main from '@modern-js/builder-doc/zh/config/tools/devServer.md'

package/zh/configure/app/tools/html-plugin.md

@@ -4,7 +4,7 @@ sidebar_label: htmlPlugin
 ---
 
 :::info BUILDER
-该配置为 Modern.js Builder 配置，可能存在无法跳转的链接。详细信息可参考 [tools.htmlPlugin](https://modernjs.dev/builder/zh/api/config-tools.html#tools-htmlplugin)。
+该配置为 Modern.js Builder 配置，详细信息可参考 [tools.htmlPlugin](https://modernjs.dev/builder/zh/api/config-tools.html#tools-htmlplugin)。
 :::
 
 import Main from '@modern-js/builder-doc/zh/config/tools/htmlPlugin.md'

package/zh/configure/app/tools/inspector.md

@@ -4,7 +4,7 @@ sidebar_label: inspector
 ---
 
 :::info BUILDER
-该配置为 Modern.js Builder 配置，可能存在无法跳转的链接。详细信息可参考 [tools.inspector](https://modernjs.dev/builder/zh/api/config-tools.html#tools-inspector)。
+该配置为 Modern.js Builder 配置，详细信息可参考 [tools.inspector](https://modernjs.dev/builder/zh/api/config-tools.html#tools-inspector)。
 :::
 
 import Main from '@modern-js/builder-doc/zh/config/tools/inspector.md'

package/zh/configure/app/tools/less.md

@@ -4,7 +4,7 @@ sidebar_label: less
 ---
 
 :::info BUILDER
-该配置为 Modern.js Builder 配置，可能存在无法跳转的链接。详细信息可参考 [tools.less](https://modernjs.dev/builder/zh/api/config-tools.html#tools-less)。
+该配置为 Modern.js Builder 配置，详细信息可参考 [tools.less](https://modernjs.dev/builder/zh/api/config-tools.html#tools-less)。
 :::
 
 import Main from '@modern-js/builder-doc/zh/config/tools/less.md'

package/zh/configure/app/tools/minify-css.md

@@ -4,7 +4,7 @@ sidebar_label: minifyCss
 ---
 
 :::info BUILDER
-该配置为 Modern.js Builder 配置，可能存在无法跳转的链接。详细信息可参考 [tools.minifyCss](https://modernjs.dev/builder/zh/api/config-tools.html#tools-minifycss)。
+该配置为 Modern.js Builder 配置，详细信息可参考 [tools.minifyCss](https://modernjs.dev/builder/zh/api/config-tools.html#tools-minifycss)。
 :::
 
 import Main from '@modern-js/builder-doc/zh/config/tools/minifyCss.md'

package/zh/configure/app/tools/postcss.md

@@ -4,7 +4,7 @@ sidebar_label: postcss
 ---
 
 :::info BUILDER
-该配置为 Modern.js Builder 配置，可能存在无法跳转的链接。详细信息可参考 [tools.postcss](https://modernjs.dev/builder/zh/api/config-tools.html#tools-postcss)。
+该配置为 Modern.js Builder 配置，详细信息可参考 [tools.postcss](https://modernjs.dev/builder/zh/api/config-tools.html#tools-postcss)。
 :::
 
 import Main from '@modern-js/builder-doc/zh/config/tools/postcss.md'

package/zh/configure/app/tools/pug.md

@@ -4,7 +4,7 @@ sidebar_label: pug
 ---
 
 :::info BUILDER
-该配置为 Modern.js Builder 配置，可能存在无法跳转的链接。详细信息可参考 [tools.pug](https://modernjs.dev/builder/zh/api/config-tools.html#tools-pug)。
+该配置为 Modern.js Builder 配置，详细信息可参考 [tools.pug](https://modernjs.dev/builder/zh/api/config-tools.html#tools-pug)。
 :::
 
 import Main from '@modern-js/builder-doc/zh/config/tools/pug.md'

package/zh/configure/app/tools/sass.md

@@ -4,7 +4,7 @@ sidebar_label: sass
 ---
 
 :::info BUILDER
-该配置为 Modern.js Builder 配置，可能存在无法跳转的链接。详细信息可参考 [tools.sass](https://modernjs.dev/builder/zh/api/config-tools.html#tools-sass)。
+该配置为 Modern.js Builder 配置，详细信息可参考 [tools.sass](https://modernjs.dev/builder/zh/api/config-tools.html#tools-sass)。
 :::
 
 import Main from '@modern-js/builder-doc/zh/config/tools/sass.md'

package/zh/configure/app/tools/style-loader.md

@@ -4,7 +4,7 @@ sidebar_label: styleLoader
 ---
 
 :::info BUILDER
-该配置为 Modern.js Builder 配置，可能存在无法跳转的链接。详细信息可参考 [tools.styleLoader](https://modernjs.dev/builder/zh/api/config-tools.html#tools-styleloader)。
+该配置为 Modern.js Builder 配置，详细信息可参考 [tools.styleLoader](https://modernjs.dev/builder/zh/api/config-tools.html#tools-styleloader)。
 :::
 
 import Main from '@modern-js/builder-doc/zh/config/tools/styleLoader.md'

package/zh/configure/app/tools/styled-components.md

@@ -4,7 +4,7 @@ sidebar_label: styledComponents
 ---
 
 :::info BUILDER
-该配置为 Modern.js Builder 配置，可能存在无法跳转的链接。详细信息可参考 [tools.styledComponents](https://modernjs.dev/builder/zh/api/config-tools.html#tools-styledcomponents)。
+该配置为 Modern.js Builder 配置，详细信息可参考 [tools.styledComponents](https://modernjs.dev/builder/zh/api/config-tools.html#tools-styledcomponents)。
 :::
 
 import Main from '@modern-js/builder-doc/zh/config/tools/styledComponents.md'

package/zh/configure/app/tools/swc.md

@@ -0,0 +1,42 @@
+---
+title: tools.swc
+sidebar_label: swc
+---
+
+- 类型： `Object`
+- 默认值： `undefined`
+
+## 介绍
+
+[SWC](https://swc.rs/) (Speedy Web Compiler) 是基于 `Rust` 语言编写的高性能 JavaScript 和 TypeScript 转译和压缩工具。在 Polyfill 和语法降级方面可以和 Babel 提供一致的能力，并且比 Babel 性能高出 10 倍不止。
+
+Modern.js 提供了开箱即用的 SWC 插件，可以为你的 Web 应用提供语法降级、Polyfill 以及压缩，并且移植了一些额外常见的 Babel 插件。
+
+## 安装
+
+使用前需要安装 `@modern-js/plugin-swc` 插件，安装完成后，会自动启用 SWC 编译和压缩能力。
+
+```bash
+pnpm add @modern-js/plugin-swc -D
+```
+
+## 配置项
+
+你可以通过 `tools.swc` 配置项来设置 SWC 编译行为。
+
+```js title="modern.config.ts"
+import { defineConfig } from '@modern-js/app-tools';
+
+export default defineConfig({
+  tools: {
+    swc: {
+      jsMinify: {
+        compress: {},
+        mangle: true,
+      },
+    },
+  },
+});
+```
+
+完整配置项请参考 [Modern.js Builder - SWC 插件配置](https://modernjs.dev/builder/zh/plugins/plugin-swc.html#%E9%85%8D%E7%BD%AE)。

package/zh/configure/app/tools/terser.md

@@ -4,7 +4,7 @@ sidebar_label: terser
 ---
 
 :::info BUILDER
-该配置为 Modern.js Builder 配置，可能存在无法跳转的链接。详细信息可参考 [tools.terser](https://modernjs.dev/builder/zh/api/config-tools.html#tools-terser)。
+该配置为 Modern.js Builder 配置，详细信息可参考 [tools.terser](https://modernjs.dev/builder/zh/api/config-tools.html#tools-terser)。
 :::
 
 import Main from '@modern-js/builder-doc/zh/config/tools/terser.md'

package/zh/configure/app/tools/ts-checker.md

@@ -4,7 +4,7 @@ sidebar_label: tsChecker
 ---
 
 :::info BUILDER
-该配置为 Modern.js Builder 配置，可能存在无法跳转的链接。详细信息可参考 [tools.tsChecker](https://modernjs.dev/builder/zh/api/config-tools.html#tools-tschecker)。
+该配置为 Modern.js Builder 配置，详细信息可参考 [tools.tsChecker](https://modernjs.dev/builder/zh/api/config-tools.html#tools-tschecker)。
 :::
 
 import Main from '@modern-js/builder-doc/zh/config/tools/tsChecker.md'

package/zh/configure/app/tools/ts-loader.md

@@ -4,7 +4,7 @@ sidebar_label: tsLoader
 ---
 
 :::info BUILDER
-该配置为 Modern.js Builder 配置，可能存在无法跳转的链接。详细信息可参考 [tools.tsLoader](https://modernjs.dev/builder/zh/api/config-tools.html#tools-tsloader)。
+该配置为 Modern.js Builder 配置，详细信息可参考 [tools.tsLoader](https://modernjs.dev/builder/zh/api/config-tools.html#tools-tsloader)。
 :::
 
 import Main from '@modern-js/builder-doc/zh/config/tools/tsLoader.md'

package/zh/configure/app/tools/webpack-chain.md

@@ -4,7 +4,7 @@ sidebar_label: webpackChain
 ---
 
 :::info BUILDER
-该配置为 Modern.js Builder 配置，可能存在无法跳转的链接。详细信息可参考 [tools.webpackChain](https://modernjs.dev/builder/zh/api/config-tools.html#tools-webpackchain)。
+该配置为 Modern.js Builder 配置，详细信息可参考 [tools.webpackChain](https://modernjs.dev/builder/zh/api/config-tools.html#tools-webpackchain)。
 :::
 
 import Main from '@modern-js/builder-doc/zh/config/tools/webpackChain.md'

package/zh/configure/app/tools/webpack.md

@@ -4,7 +4,7 @@ sidebar_label: webpack
 ---
 
 :::info BUILDER
-该配置为 Modern.js Builder 配置，可能存在无法跳转的链接。详细信息可参考 [tools.webpack](https://modernjs.dev/builder/zh/api/config-tools.html#tools-webpack)。
+该配置为 Modern.js Builder 配置，详细信息可参考 [tools.webpack](https://modernjs.dev/builder/zh/api/config-tools.html#tools-webpack)。
 :::
 
 import Main from '@modern-js/builder-doc/zh/config/tools/webpack.md'

package/zh/guides/advanced-features/custom-app.md

@@ -9,17 +9,23 @@ sidebar_position: 7
 
 ## 添加自定义行为
 
-当 `index` 文件默认导出**函数**是，Modern.js 还是会根据 `runtime.features` 的设置情况生成 `createApp` 包裹后的代码。在渲染过程中，将 `createApp` 包裹后的组件作为参数传递给 `index` 文件导出的函数，这样开发者可以自定义将组件挂载到 DOM 节点上，或在挂载前添加自定义行为。例如：
+当 `index` 文件默认导出**函数**是，Modern.js 还是会根据 `runtime` 的设置情况生成 `createApp` 包裹后的代码。在渲染过程中，将 `createApp` 包裹后的组件作为参数传递给 `index` 文件导出的函数，这样开发者可以自定义将组件挂载到 DOM 节点上，或在挂载前添加自定义行为。例如：
 
 ```js title=src/index.jsx
+import ReactDOM from 'react-dom/client'
 import { bootstrap } from '@modern-js/runtime';
 
+
 export default App => {
   // do something before bootstrap...
-  bootstrap(App, 'root');
+  bootstrap(App, 'root', undefined, ReactDOM);
 };
 ```
 
+:::warning
+由于 bootstrap 函数需要兼容 React17 和 React18 的用法，调用 bootstrap 函数时需要手动传入 ReactDOM 参数。
+:::
+
 Modern.js 生成的文件内容如下：
 
 ```js

package/zh/guides/advanced-features/ssg.md

@@ -1,5 +1,5 @@
 ---
-title: 静态站点生成
+title: 静态站点生成（SSG）
 sidebar_position: 4
 ---
 
@@ -9,11 +9,11 @@ SSG（Static Site Generation）是一种基于数据与模板，在构建时渲
 SSG 是构建阶段的解决方案，因此仅对生产环境有效。通过 `dev` 命令运行时，表现效果与 SSR 相同。
 :::
 
-我们首先需要执行`pnpm run new`启用 SSG 功能：
+我们首先需要执行 `pnpm run new` 启用 SSG 功能：
 
 ```bash
-? 请选择你想要的操作 启用可选功能
-? 启用可选功能 启用「SSG」功能
+? 请选择你想要的操作： 启用可选功能
+? 启用可选功能： 启用「SSG」功能
 ```
 
 SSG 在**约定式路由**和**自控式路由**下的使用方式不同。
@@ -25,22 +25,37 @@ SSG 在**约定式路由**和**自控式路由**下的使用方式不同。
 例如，以下是一个使用约定式路由的项目目录结构：
 
 ```
-├── src/
-│   ├── pages/
-│   │   ├── home.tsx
-│   │   ├── info.tsx
-│   │   └── index.tsx
+.
+├── src
+│   └── routes
+│       ├── layout.tsx
+│       ├── page.tsx
+│       └── user
+│           ├── layout.tsx
+│           ├── page.tsx
+│           └── profile
+│               └── page.tsx
 ```
 
-在 `src/pages/index.tsx` 中添加组件代码：
+上述文件目录将会生成以下三条路由：
+
+- `/`
+- `/user`
+- `/user/profile`
+
+:::note
+如果还不了解约定式路由的规则，可以先查看[路由](/docs/guides/basic-features/routes)。
+:::
+
+在 `src/routes/page.tsx` 中添加组件代码：
 
 ```jsx title="src/pages/index.tsx"
 export default () => {
-  return  <div>index page</div>
+  return  <div>Index Page</div>
 }
 ```
 
-SSG 和 SSR 一样，也是在 Node.js 环境中完成页面渲染，因此我们可以在开发阶段开启 SSR，提前在开发阶段验证 SSG 渲染效果：
+SSG 也是在 Node.js 环境渲染页面，因此我们可以在**开发阶段开启 SSR**，提前在暴露代码问题，验证 SSG 渲染效果：
 
 ```typescript title="modern.config.ts"
 export default defineConfig({
@@ -50,13 +65,11 @@ export default defineConfig({
 }
 ```
 
-在项目根路径下执行 `pnpm run dev` 命令，查看 `dist/` 目录，此时只生成一个 HTML 文件：
-
-![vsc-alert](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/ssg-dev.png)
+在项目根路径下执行 `pnpm run dev` 命令，查看 `dist/` 目录，此时只生成一个 HTML 文件 `main/index.html`。
 
-在项目根路径下执行 `pnpm run build` 命令，构建完成后，查看 `dist/` 目录，此时生成 `main/index.html`、`main/home/index.html` 和 `main/info/index.html` 3 个 HTML 文件，分别对应 `/`、`/home`、`/info` 3 个约定式路由，可见**约定式路由**中的每一条路由，都会生成一个单独的 HTML 文件。查看 `main/index.html`，可以发现包含 `index page` 的文本内容，这正是 SSG 的效果。
+在项目根路径下执行 `pnpm run build` 命令，构建完成后，查看 `dist/` 目录，此时生成 `main/index.html`、`main/user/index.html` 和 `main/user/profile/index.html` 三个 HTML 文件，内容分别对应上述三条路由。
 
-![vsc-alert](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/ssg-build.png)
+**约定式路由**中的每一条路由，都会生成一个单独的 HTML 文件。查看 `main/index.html`，可以发现包含 `Index Page` 的文本内容，这正是 SSG 的效果。
 
 执行 `pnpm run start` 启动项目后，访问页面，在浏览器我们工具的 Network 窗口，查看请求返回的文档，文档包含组件渲染后的完整页面内容。
 
@@ -64,45 +77,46 @@ export default defineConfig({
 
 **自控式路由**是通过组件代码自定义路由，需要应用运行起来才能获取准确的路由信息。因此，无法开箱即用的使用 SSG 功能。此时需要用户提前告知 Modern.js 框架，哪些路由需要开启 SSG 功能。
 
-例如有以下代码：
-
-```ts
-import { Switch, Route } from '@modern-js/runtime/router';
-
-export default () => (
-  <Switch>
-    <Route path="/" exact={true}>
-      <div>Home</div>
-    </Route>
-    <Route path="/foo" exact={true}>
-      <div>Foo</div>
-    </Route>
-  </Switch>
-);
-```
+例如有以下代码，包含多条路由，设置 `output.ssg` 为 `true` 时，默认只会渲染入口路由即 `/`：
+
+```tsx title="src/App.tsx"
+import { useRuntimeContext } from '@modern-js/runtime';
+import { Routes, Route, BrowserRouter } from '@modern-js/runtime/router';
+import { StaticRouter } from '@modern-js/runtime/router/server';
 
-希望为 `/foo` 路由开启 SSG 功能，同样利用 `output.ssg` 配置。该参数允许配置页面信息，告知 Modern.js 开启指定路由的 SSG 功能。
+const Router = typeof window === 'undefined' ? StaticRouter : BrowserRouter;
+
+export default () => {
+  const { context } = useRuntimeContext();
+  return (
+    <Router location={context.request.pathname}>
+      <Routes>
+        <Route index element={<div>index</div>} />
+        <Route path="about" element={<div>about</div>} />
+      </Routes>
+    </Router>
+  );
+};
+```
 
-例如上述入口中，包含两条客户端路由，分别是 `/` 和 `/foo`，设置 `output.ssg` 为 `true` 时，默认只会渲染入口路由即 `/`。如果我们希望同时开启 `/foo` 的 SSG 功能，可以这样配置：
+如果我们希望同时开启 `/about` 的 SSG 功能，可以配置 `output.ssg`，告知 Modern.js 开启指定路由的 SSG 功能。
 
 ```typescript title="modern.config.ts"
 export default defineConfig({
   output: {
     ssg: {
-      routes: ['/', '/foo'],
+      routes: ['/', '/about'],
     },
   },
 })
 ```
 
-执行 `pnpm run build` 与 `pnpm run start` 后，访问 `http://localhost:8080/foo`，在 Preview 视图中可以看到页面已经完成渲染。
-
-查看构建产物文件，可以看到 `dist/` 目录中，在默认的 `main` 入口产物目录下，新增一个 `foo.html` 文件：
+执行 `pnpm run build` 与 `pnpm run start` 后，访问 `http://localhost:8080/about`，在 Preview 视图中可以看到页面已经完成渲染。
 
-![vsc-alert](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/ssg-foo.png)
+查看构建产物文件，可以看到 `dist/` 目录中，新增了一个 `main/about/index.html` 文件。
 
 :::info
-以上仅介绍了单入口的情况，与部分配置。更多相关内容可以查看 [API 文档](/docs/configure/app/output/ssg)。
+以上仅介绍了单入口的情况，更多相关内容可以查看 [API 文档](/docs/configure/app/output/ssg)。
 :::
 
 ### 获取数据
@@ -116,36 +130,33 @@ export default defineConfig({
 - 在开发阶段，不管 `useLoader` 是否配置 `{ static: true }`，函数都会在 SSR 时获取数据。
 :::
 
-修改上述 `App.ts` 的代码为：
+修改上述 `src/App.ts` 的代码为：
 
-```ts title="App.ts"
-import { Switch, Route } from '@modern-js/runtime/router';
-import { useLoader } from '@modern-js/runtime';
+```tsx title="App.ts"
+import { useRuntimeContext, useStaticLoader } from '@modern-js/runtime';
+import { Routes, Route, BrowserRouter } from '@modern-js/runtime/router';
+import { StaticRouter } from '@modern-js/runtime/router/server';
+
+const Router = typeof window === 'undefined' ? StaticRouter : BrowserRouter;
 
 export default () => {
-  const { data } = useLoader(
-    async () => ({
-      message: Math.random(),
-    }),
-    {
-      static: true,
-      params: 'foo',
-    },
-  );
+  const { context } = useRuntimeContext();
+
+  const { data } = useStaticLoader(async () => ({
+    message: Math.random(),
+  }));
 
   return (
-    <Switch>
-      <Route path="/" exact={true}>
-        <div>Home</div>
-      </Route>
-      <Route path="/foo" exact={true}>
-        <div>Foo, {data?.message}</div>
-      </Route>
-    </Switch>
+    <Router location={context.request.pathname}>
+      <Routes>
+        <Route index element={<div>index</div>} />
+        <Route path="about" element={<div>about, {data?.message}</div>} />
+      </Routes>
+    </Router>
   );
 };
 ```
 
 执行 `pnpm run dev`，重复刷新页面，可以看到 `/foo` 页面的渲染结果不断发生变化，说明数据是在请求时获取的。
 
-重新执行 `pnpm run build` 后，执行 `pnpm run start`，重复刷新页面，发现页面渲染结果始终保持同样的内容，说明数据在请求时不会再次获取。
+重新执行 `pnpm run build` 后，执行 `pnpm run start`，重复刷新页面，发现页面渲染结果始终保持同样的内容，数据在请求时不会再次获取，说明页面在编译时已经完成渲染。