@modern-js/main-doc 0.0.0-next-1685383616364 → 0.0.0-next-1685436485731

package/docs/en/apis/app/hooks/src/pages.mdx

@@ -4,11 +4,15 @@ sidebar_position: 3
 ---
 # pages/
 
-Entry identifier if the application want uses file system-based routing.
+The identifier for the entry point when the application uses the [`Pages` entry](https://modernjs.dev/v1/docs/guides/usages/entries#pages-%E5%85%A5%E5%8F%A3) type.
 
-When the entry is the **Pages entry** type, the files in the `pages/` directory will be analyzed to client side routing.
+:::info
+Compatible with Modern.js 1.0 `Pages` entry. It is recommended to use [conventional routing](guides/basic-features/routes.html#conventional-routing).
+:::
+
+When the project structure is of the `Pages entry` type, the client-side routing configuration will be obtained by analyzing the files in the `src/pages` directory.
 
-For example, the following directory:
+For example, the following directory structure:
 
 ```bash
 .
@@ -20,7 +24,7 @@ For example, the following directory:
         └── info.jsx
 ```
 
-The generated route is configured as:
+The corresponding generated routing configuration is:
 
 ```bash
 [
@@ -30,22 +34,22 @@ The generated route is configured as:
 ]
 ```
 
-Files match the following conditions will not be treated as routing files:
+Files under the pages directory that meet the following conditions will not be treated as routing files:
 
-- suffix is not `.(j|t)sx?`.
-- `.d.ts` type definition file.
-- test file suffix like `.(test|spec|e2e).(j|t)sx?`.
+- Files whose suffix is not `.(j|t)sx?`.
+- `.d.ts` type definition files.
+- Test files ending in `.test.(j|t)sx?` or `.spec.(j|t)sx?` or `.e2e.(j|t)sx?`.
 
 :::tip
-it is recommended to write only the routing files in the `pages/`, and write the business logic to the independent features directory outside the `pages/`. In this way, most of the files in the pages directory will be routing files, and there is no need for additional filtering rules.
+It is recommended to only write entry code in the pages directory and write business logic in the independent features directory outside the pages directory. In this way, most of the files under the pages directory will be routing files, and there is no need for additional filtering rules.
 
 :::
 
 ### Dynamic Routing
 
-Directories or files wrapped with `[]` are considered dynamic routing.
+If the directory name of the route file is named with [], the generated route will be used as a dynamic route.
 
-For example the following directory structure:
+For example, the following directory structure:
 
 ```bash
 .
@@ -60,7 +64,7 @@ For example the following directory structure:
         └── info.jsx
 ```
 
-The generated route is configured as:
+The corresponding generated routing configuration is:
 
 ```js
 [
@@ -72,13 +76,13 @@ The generated route is configured as:
 ]
 ```
 
-Basis dynamic routing, it supports adding special routing suffixes `(*、?、+)`.
+On the basis of dynamic routing, special routing suffixes `(*, ?, +)` can be added.
 
-For example: `src/pages/users/[id]*.tsx` generate route `/users/:id*`
+For example: `src/pages/users/[id]*.tsx` will result in the route `/users/:id*`.
 
 ### Global Layout
 
-When the entire App needs a global `layout`, it can be achieved through `pages/_app.tsx`, which as follows:
+When the entire application needs a global `layout`, it can be achieved through `pages/_app.tsx`. The specific writing method is as follows:
 
 ```js
 import React from 'react';
@@ -93,9 +97,9 @@ export const App = ({Component, ...pageProps}:{ Component: React.ComponentType})
 }
 ```
 
-The above `Component` is the component to which the route is accessed.
+The above `Component` is the component matched when accessing a specific route.
 
-For example the following directory structure:
+For example, the following directory structure:
 
 ```bash
 .
@@ -107,26 +111,26 @@ For example the following directory structure:
     └── index.js
 ```
 
-- access `/`, the `Component` is `pages/index.js`.
-- access `/a`, the `Component` is `pages/a/index.js`.
-- access `/a/b`, the `Component` is `pages/a/b/index.js`.
+- Accessing `/` corresponds to the `Component` component in `pages/index.js`.
+- Accessing `/a` corresponds to the `Component` component in `pages/a/index.js`.
+- Accessing `/a/b` corresponds to the `Component` component in `pages/a/b/index.js`.
 
-:::tip Advantages
+:::tip Advantages of global layout
 
-- preserve the state of the global layout when the page changes.
-- add global css.
-- handle ComponentDidCatch error
-- use [defineConfig](/apis/app/runtime/app/define-config) dynamic configuration runtime.
+- Preserve the state of the global layout when the page changes.
+- Add global styles.
+- ComponentDidCatch error handling.
+- Use [defineConfig](/apis/app/runtime/app/define-config) to dynamically configure the runtime configuration.
 
 :::
 
 ### Partial Layout
 
-When developing an App, where sub routes under the same route may share the layout.
+When developing an application, there are scenarios where sub-routes under the same route share a layout.
 
-For this scene, Modern.js convention, when there is a `_layout.js` in the directory, the routes can shared this layout.
+For this scenario, Modern.js conventionally has a similar effect to global layout when there is `_layout.js` under the directory.
 
-For example the following directory structure:
+For example, the following directory structure:
 
 ```bash
 └── pages
@@ -147,18 +151,18 @@ const ALayout = ({ Component, ...pageProps }) => {
 export default ALayout;
 ```
 
-The Component props is the specific route, for example
+The `Component` parameter is the component corresponding to a specific accessed route, for example:
 
-- access `/a`, the `Component` is `pages/a/index.js`.
-- 访问 `/a/b`, the `Component` is `pages/a/b/index.js`.
+- Accessing `/a` corresponds to the `Component` component in `pages/a/index.js`.
+- Accessing `/a/b` corresponds to the `Component` component in `pages/a/b/index.js`.
 
-In this way, you can use `pages/a/_layout.js` to display the routing common layout in the `a` directory.
+In this way, `pages/a/_layout.js` can be used to meet the layout needs of shared routes under the `a` directory.
 
-### 404 路由
+### 404 Route
 
-The convention `pages/404.[tj]sx` is the default 404 route.
+`pages/404.[tj]sx` is conventionally the default 404 route.
 
-For example the following directory structure:
+For example, the following directory structure:
 
 ```bash
 .
@@ -169,7 +173,7 @@ For example the following directory structure:
         ├── 404.js
 ```
 
-the generated route is configured is as:
+The generated routing configuration is as follows:
 
 ```bash
 [
@@ -179,4 +183,4 @@ the generated route is configured is as:
 ]
 ```
 
-All unmatched routes will match to `pages/404.[tj]s`.
+All unmatched routes will be matched to `pages/404.[tj]s`.

package/docs/en/apis/app/hooks/src/routes.mdx

@@ -4,13 +4,13 @@ sidebar_position: 2
 ---
 # routes/
 
-The entry identifier when the application uses file system-based routing.
+The identifier for the entry point when the application uses [Conventional Routing](guides/basic-features/routes.html#conventional-routing).
 
-When the project structure is of type `Routes directory entry`, the files in the `src/routes` directory are parsed to get the client-side routing configuration. See [Routing by convention](/guides/basic-features/routes) for more details on usage.
+Conventional routing uses `routes/` as the convention for the entry point and analyzes the files in the `src/routes` directory to obtain the client-side routing configuration.
 
-Any `layout.[tj]sx` and `page.[tj]sx` under `src/routes` will be used as a route to the application:
+Any `layout.[tj]sx` and `page.[tj]sx` under `src/routes` will be used as the application's routes:
 
-```bash {3}
+```bash {3,4}
 .
 └── routes
     ├── layout.tsx
@@ -20,9 +20,9 @@ Any `layout.[tj]sx` and `page.[tj]sx` under `src/routes` will be used as a route
         └── page.tsx
 ```
 
-## basic example
+## Basic Example
 
-The directory names in the `routes` directory will be used as a mapping of the route url, where `layout.tsx` is used as the layout component and `page.tsx` as the content component, which is a leaf node of the whole route, for example the following directory structure:
+The directory name under `routes` will be used as the mapping of the route URL. `layout.tsx` is used as the layout component and `page.tsx` is used as the content component in the routing. They are the leaf nodes of the entire route. For example, the following directory structure:
 
 ```bash
 .
@@ -32,14 +32,14 @@ The directory names in the `routes` directory will be used as a mapping of the r
         └── page.tsx
 ```
 
-The following two routes are produced:
+will generate two routes:
 
 - `/`
 - `/user`
 
-## Dynamic Route
+## Dynamic Routing
 
-If the directory name of the route file is named with `[]`, the generated route will be used as a dynamic route. For example, the following file directories:
+If the directory name of the route file is named with `[]`, the generated route will be used as a dynamic route. For example, the following file directory:
 
 ```
 └── routes
@@ -50,35 +50,15 @@ If the directory name of the route file is named with `[]`, the generated route
     └── page.tsx
 ```
 
-The `routes/[id]/page.tsx` file will be converted to a `/:id` route. All `/xxx` will match that route, except for the `/blog` route, which can be matched exactly.
+The `routes/[id]/page.tsx` file will be converted to the `/:id` route. Except for the `/blog` route that can be matched exactly, all other `/xxx` routes will be matched to this route.
 
-In the component, you can get the corresponding parameters by [useParams](/apis/app/runtime/router/router#useparams).
+In the component, you can use [useParams](/apis/app/runtime/router/router#useparams) to obtain the corresponding named parameter.
 
-In the loader, params will be used as input to [loader](/guides/basic-features/data-fetch#loader-function), and the corresponding parameters can be retrieved through the property `params`.
+When using the [loader](/guides/basic-features/data-fetch#the-loader-function) function to obtain data, `params` will be passed as an input parameter to the `loader` function, and the corresponding parameter can be obtained through the attribute of `params`.
 
-## Dynamic Optional Routes
+## Layout Component
 
-By using file directories named with `[$]`, the generated routes will be treated as dynamic routes. For example, the following file directory:
-
-```
-└── routes
-    ├── user
-    │   └── [id$]
-    │       └── page.tsx
-    ├── blog
-    │   └── page.tsx
-    └── page.tsx
-```
-
-The `routes/user/[id$]/page.tsx` file will be converted to the `/user/:id?` route. All routes under `/user` will match this route, and the `id` parameter is optional. This route is commonly used to differentiate between **creating** and **editing**.
-
-In the component, you can get the corresponding named parameters using [useParams](/apis/app/runtime/router/router#useparams).
-
-In the loader, params will be passed as an argument to the [loader](/guides/basic-features/data-fetch#loader-函数), and you can get them through `params.xxx`.
-
-## Layout component
-
-As in the example below, you can add a common layout component for all routing components by adding `layout.tsx`
+In the following example, a common layout component can be added to all route components by adding `layout.tsx`:
 
 ```bash
 .
@@ -90,7 +70,7 @@ As in the example below, you can add a common layout component for all routing c
         └── page.tsx
 ```
 
-You can represent child components in layout components by using `<Outlet>`:
+In the layout component, you can use `<Outlet>` to represent the child components:
 
 ```tsx title=routes/layout.tsx
 import { Link, Outlet, useLoaderData } from '@modern-js/runtime/router';
@@ -105,6 +85,6 @@ export default () => {
 ```
 
 :::note
-`<Outlet>` is a new API in React Router 6, see [Outlet] for details(https://reactrouter.com/en/main/components/outlet#outlet).
+`<Outlet>` is a new API in React Router 6. For details, see [Outlet](https://reactrouter.com/en/main/components/outlet#outlet).
 
 :::

package/docs/en/apis/app/hooks/src/server.mdx

@@ -4,4 +4,4 @@ sidebar_position: 8
 ---
 # *.[server|node].[tj]sx
 
-Used in application projects to place server side code, When `*.tsx` and `*. [server|node].tsx` coexist, rendering on the server side will give preference to the `*. [server|node].tsx` file instead of the `*.tsx` file.
+Used in the application project to place server-side code. When `*.tsx` and `*.[server|node].tsx` coexist, SSR will prefer to use the `*.[server|node].tsx` file instead of the `*.tsx` file when rendering on the server.

package/docs/en/apis/app/hooks/src/stories.mdx

@@ -4,11 +4,14 @@ sidebar_position: 7
 ---
 # **/*.stories.[tj]sx
 
-App Storybook debug file. files in `src/` which suffix `*.stories.[tj]sx` are as debug files for Storybook.
+Application project Storybook files.
 
-Execute the `dev story` command to debugging these files in the Storybook.
+You can create files in the `*.stories.[tj]sx` format in the project source code directory `src/` as Storybook files.
+
+Run the `npm run dev story` command in the project to use these files to debug relevant content in Storybook.
 
 :::info
-Using a Storybook requires executing `new` command to enable the 「Visual Testing (Storybook)」 mode.
+To use Storybook, you need to enable the "Visual Testing (Storybook)" mode by running the `new` command in the project first.
 
 :::
+

package/docs/en/apis/app/hooks/src/test.mdx

@@ -2,13 +2,14 @@
 title: '**/*.test.[tj]sx?'
 sidebar_position: 6
 ---
+
 # **/*.test.[tj]sx?
 
-App test file.
+Application project test files.
 
-The App supports the file suffixed with `.test.[tj]sx` under the `src/` to write test cases.
+The application project supports creating files with the suffix `.test.[tj]sx?` in the project source code directory (`src`) to write test cases.
 
 :::info
-To use unit test and integration test, you need to execute the `new` command in advance to enable the `unit test/integration test`.
+To use unit testing and integration testing, you need to enable the "Unit Testing / Integration Testing" feature by running the `new` command in the project first.
 
 :::

package/docs/en/apis/app/runtime/web-server/hook.mdx

@@ -24,8 +24,8 @@ Before using this API, please execute `pnpm run new` to create a new "Custom Web
 
 ```bash
 pnpm run new
-? Action Create project element
-? New "Custom Web Server" source code directory
+? Please select the operation you want: Create Elements
+? Please select the type of element to create: New "Custom Web Server" source code directory
 ```
 
 :::

package/docs/en/apis/app/runtime/web-server/middleware.mdx

@@ -27,8 +27,8 @@ Before using this API, please execute `pnpm run new` to create a new "Custom Web
 
 ```bash
 pnpm run new
-? Action Create project element
-? New "Custom Web Server" source code directory
+? Please select the operation you want: Create Element
+? Please select the type of element to create: New "Custom Web Server" source code directory
 ```
 
 :::

package/docs/en/components/init-app.mdx

@@ -1,9 +1,9 @@
 Modern.js generator will provide an interactive Q & A interface, initialization items according to the result, according to the default selection:
 
 ```bash
-? Please select the solution you want to create: Web App
-? Development Language: TS
-? Package Manager: pnpm
+? Please select the type of project you want to create: Web App
+? Please select the programming language: TS
+? Please select the package manager: pnpm
 ```
 
 After create the project, Modern.js automatically installs dependency and creates a git repository.

package/docs/en/components/init-rspack-app.mdx

@@ -1,7 +1,7 @@
 ```bash
 $ npx @modern-js/create@latest myapp
-? Please select the solution you want to create: Web App
-? Development Language: TS
-? Package Manager: pnpm
-? Bundler: Rspack
+? Please select the type of project you want to create: Web App
+? Please select the programming language: TS
+? Please select the package manager: pnpm
+? Please select the bundler: Rspack
 ```

package/docs/en/components/ua-polyfill.mdx

@@ -9,8 +9,8 @@ Modern.js also provides a runtime Polyfill solution based on browser [UA](https:
 exec `pnpm run new` to enable this features:
 
 ```bash
-? Action Enable features
-? Enable features Enable UA-based Polyfill Feature
+? Please select the operation you want: Enable features
+? Please select the feature name: Enable UA-based Polyfill Feature
 ```
 
 After executing the command, register the Polyfill plugin in `modern.config.ts`:

package/docs/en/configure/app/tools/swc.mdx

@@ -22,8 +22,8 @@ When using Rspack as the bundler, SWC will be used for transpiling and compressi
 First, you need to execute `pnpm run new` to enable the SWC compile:
 
 ```bash
-? Action: Enable features
-? Enable features: Enable SWC Compile
+? Please select the operation you want: Enable features
+? Please select the feature name: Enable SWC Compile
 ```
 
 After the installation, please register the SWC plugin in the `modern.config.ts` file, then the SWC compilation and compression will be enabled.

package/docs/en/guides/advanced-features/bff/frameworks.mdx

@@ -6,7 +6,7 @@ title: Frameworks
 
 Modern.js's BFF supports different runtime frameworks, currently Modern.js's BFF supports two runtime frameworks[Express.js](https://expressjs.com/) 和 [Koa.js](https://koajs.com/).
 
-## Function Writing
+## Function Mode
 
 Under the function writing, only the middleware writing method of various runtime frameworks is different, and other implementations are basically the same. Take Express as an example to introduce how to write a middleware by hand in the `api/_ app.ts` and add permission verification:
 
@@ -96,7 +96,7 @@ Refresh the page and you can see that `/api/hello` was accessed successfully:
 
 The above code simulates the way to add middleware to the `/api/_app.ts` to achieve an easy login function. Also, other functions can be implemented in this hook file to extend BFF Server.
 
-## Framework Writing
+## Framework Mode
 
 Under the framework writing, Modern.js does not collect middleware in the `api/_app.ts`, and the running process is controlled by the plugin itself.
 

package/docs/en/guides/advanced-features/bff/function.mdx

@@ -51,10 +51,10 @@ Execute `pnpm run dev`, then open `http://localhost:8080/` to see that the page
 
 In Modern.js, the BFF function routing system is implemented based on the file system, and it is also a conventional routing system.
 
-In **Function Writing**, All files under `api/` will map to an interface. In **Framework Writing**, All files under `api/lambda` will map to an interface
+In **Function Mode**, All files under `api/` will map to an interface. In **Framework Mode**, All files under `api/lambda` will map to an interface
 
 :::note
-Function Writing & Framework Writing will introduce soon.
+Function Mode & Framework Mode will introduce soon.
 
 :::
 
@@ -69,14 +69,14 @@ Files named `index.[jt]s` are mapped to the previous directory.
 - `api/index.ts` -> `{prefix}/`
 - `api/user/index.ts` -> `{prefix}/user`
 
-### Multi-layer Route
+### Multi-layer Routing
 
 Supports parsing nested files, if you create a nested folder structure, the files will still automatically parse routes in the same way.
 
 - `api/hello.ts` -> `{prefix}/hello`
 - `api/user/list.ts` -> `{prefix}/user/list`
 
-### Dynamic Route
+### Dynamic Routing
 
 Create folders or files named with `[xxx]` to support dynamic named routing parameters.
 

package/docs/en/guides/advanced-features/bff/type.mdx

@@ -1,19 +1,19 @@
 ---
 sidebar_position: 2
-title: Writing Type
+title: BFF Type
 ---
-# Writing Type
+# BFF Type
 
 Runtime framework support is also an important part of **BFF**. Modern.js supports extending BFF's runtime framework through plugins, and provides a series of built-in plugins, developers can directly use the conventions and ecology of the framework.
 
-The plugin is compatible with most of the specifications of these frameworks, and each framework needs to provide two types of ways to extend the writing of BFF functions, namely **Function Writing** and **Framework Writing**.
+The plugin is compatible with most of the specifications of these frameworks, and each framework needs to provide two types of ways to extend the writing of BFF functions, namely **Function Mode** and **Framework Mode**.
 
 :::note
 Whether the current `api/` directory structure is written as a framework is determined by the corresponding plugin, Modern.js don't care.
 
 :::
 
-## Function Writing
+## Function Mode
 
 When the plugin considers that it is currently written as a function, it must support writing middleware in the `api/_ app.ts` to extend the BFF function.
 
@@ -32,7 +32,7 @@ The writing of middleware for different plugins is not the same, see [Runtime Fr
 
 :::
 
-## Framework Writing
+## Framework Mode
 
 Framework writing is a way of using frame structure to extend BFF functions. Compared with function writing, although frame writing can use more frame structure and make the entire BFF Server clearer in complex scenarios, it is also more complex and requires more attention to the content at the framework level.
 

package/docs/en/guides/advanced-features/rspack-start.mdx

@@ -36,8 +36,8 @@ You can enable Rspack build by running `pnpm run new`:
 
 ```bash
 $ pnpm run new
-? Action: Enable features
-? Enable features: Enable Rspack Build
+? Please select the operation you want: Enable features
+? Please select the feature name: Enable Rspack Build
 ```
 
 After executing the command, enable the Rspack build in `modern.config.ts`:

package/docs/en/guides/advanced-features/ssg.mdx

@@ -9,8 +9,8 @@ Static Site Generation is a solution for rendering complete static web pages at
 First need to execute `pnpm run new` to enable the SSG features:
 
 ```bash
-? Action Enable features
-? Enable features Enable SSG
+? Please select the operation you want: Enable features
+? Please select the feature name: Enable SSG
 ```
 
 After execute script, register SSG plugin in `modern.config.ts`:

package/docs/en/guides/advanced-features/testing.mdx

@@ -9,8 +9,8 @@ Modern.js integrates the testing capabilities of [Jest](https://jestjs.io/) by d
 First need to execute `pnpm run new` enable [unit test/integration test] features:
 
 ```
-? Action: Enable features
-? Enable features: Enable Unit Test / Integration Test
+? Please select the operation you want: Enable features
+? Please select the feature name: Enable Unit Test / Integration Test
 ```
 
 After executing the above command, the `"test": "modern test"` command will be automatically generated in package.json.

package/docs/en/guides/advanced-features/web-server.mdx

@@ -27,8 +27,8 @@ Because the full web server cannot be controlled this way, and the extension log
 You can execute the'pnpm run new 'command in the project root directory to enable the "Custom Web Serve" function:
 
 ```bash
-? Action Create project element
-? New "Custom Web Server" source code directory
+? Please select the operation you want: Create Element
+? Please select the type of element to create: New "Custom Web Server" source code directory
 ```
 
 After executing the command, register the `@modern-js/plugin-server` plugin in `modern.config.ts`:

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

@@ -66,8 +66,8 @@ If you need to use other CSS-in-JS libraries such as [styled-jsx](https://www.np
 Follow the steps below to make a selection:
 
 ```bash
-? Action: Enable features
-? Enable features: Enable Tailwind CSS
+? Please select the operation you want: Enable features
+? Please select the feature name: Enable Tailwind CSS
 ```
 
 Register the Tailwind plugin in `modern.config.ts`:

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

@@ -182,7 +182,7 @@ Routes generated from file directories named with `[$]` will be treated as dynam
 
 The `routes/user/[id$]/page.tsx` file will be converted to the `/user/:id?` route. All routes under `/user` will match this route, and the `id` parameter is optional. This route is usually used to distinguish between **creation** and **editing**.
 
-In the component, you can use [useParams](/apis/app/runtime/router/router#useparams) to obtain the corresponding named parameter.
+In the component, you can use [useParams](/apis/app/runtime/router/router#useparams) to get the corresponding named parameter.
 
 In the loader, params will be passed as the input parameter of the [loader function](/guides/basic-features/data-fetch#loader-function), and you can get the parameter value through `params.xxx`.
 
@@ -191,7 +191,7 @@ In the loader, params will be passed as the input parameter of the [loader funct
 If you create a `$.tsx` file under the routes directory, it will be treated as the catch-all routing component. When there is no matching route, this component will be rendered.
 
 :::note
-`$.tsx` can be considered as a special `page` route component. When there is a `layout` component in the current directory, `$.tsx` will be rendered as a child component of `layout`.
+`$.tsx` can be considered as a special `page` route component. When there is a `layout.tsx` file in the current directory, `$.tsx` will be rendered as a child component of `layout`.
 :::
 
 For example, the following directory structure:
@@ -215,7 +215,7 @@ params['*']; // => 'aaa/bbb'
 
 ### No-path Layout
 
-When the directory name starts with `__`, the corresponding directory name will not be converted to an actual route path. For example, the following file directory:
+When the directory name starts with `__`, the directory name will not be converted to an actual route path. For example, the following file directory:
 
 ```bash
 .
@@ -449,7 +449,7 @@ However, this also brings a problem: if the chunk corresponding to the route has
 
 In this case, you can define a `Loading` component to display a custom `Loading` component before the static resources are loaded.
 
-To further improve the user experience and reduce loading time, Modern.js supports defining the `prefetch` attribute on the Link component to preload static resources and data. The `prefetch` attribute has three optional values:
+To further improve the user experience and reduce loading time, Modern.js supports defining the `prefetch` attribute on the Link component to preload static resources and data.
 
 ```tsx
 <Link prefetch="intent" to="page">
@@ -461,6 +461,8 @@ To further improve the user experience and reduce loading time, Modern.js suppor
 
 :::
 
+The `prefetch` attribute has three optional values:
+
 - `none`: default value, no prefetching, no additional behavior.
 - `intent`: This is the value we recommend for most scenarios. When you hover over the Link, the corresponding chunk and data defined in the data loader will be loaded automatically. When you move the mouse away, the loading will be cancelled automatically. In our tests, even fast clicks can reduce loading time by about 200ms.
 - `render`: The corresponding chunk and data defined in the Data Loader will be loaded when the Link component is rendered.
@@ -504,8 +506,6 @@ export default () => {
 Modern.js provides a series of optimizations for resource loading and rendering for conventional routing by default, and provides out-of-the-box SSR capabilities. When using self-controlled routing, developers need to encapsulate these capabilities themselves. It is recommended to use conventional routing.
 :::
 
-When using self-controlled routing, if the developer turns off the [`runtime.router`](/configure/app/runtime/router) configuration and uses `react-router-dom` directly, they also need to wrap it according to the React Router documentation.
-
 ## Other
 
 By default, Modern.js will enable the built-in routing scheme, which is React Router.
@@ -518,7 +518,9 @@ export default defineConfig({
 });
 ```
 
-Modern.js exposes the API of React Router from the `@modern-js/runtime/router` namespace for developers to use, ensuring that developers and Modern.js use the same code. In addition, in this case, the React Router code will be bundled into the JS output. If the project already has its own routing scheme or does not need to use client-side routing, this feature can be turned off.
+As mentioned above, when the [`runtime.router`](/configure/app/runtime/router) configuration is enabled, Modern.js will export the API of React Router from the `@modern-js/runtime/router` namespace for developers to use, ensuring that developers and Modern.js are using the same code, and automatically wrapping the `Provider` component according to the router configuration. In addition, in this case, the code of React Router will be packed into the JS output.
+
+If the project already has its own routing plan or does not need to use client-side routing, this feature can be disabled.
 
 ```js
 export default defineConfig({
@@ -527,3 +529,5 @@ export default defineConfig({
   },
 });
 ```
+
+As mentioned above, if the [`runtime.router`](/configure/app/runtime/router) configuration is disabled and `react-router-dom` is used directly for project routing management, the `Provider` needs to be wrapped according to the React Router documentation.

package/docs/en/guides/concept/entries.mdx

@@ -33,9 +33,9 @@ The project initialized by Modern.js is single-entry (SPA), and the project stru
 Modern.js can easily switch from single entry to multiple entry. You can execute `pnpm run new` under the project to create entry through generator:
 
 ```bash
-? Action: Create project element
-? Create project element: New "entry"
-? Entry name: new-entry
+? Please select the operation you want: Create Element
+? Please select the type of element to create: New "entry"
+? Please fill in the entry name: new-entry
 ```
 
 After execution, Modern.js will automatically generate a new entry directory, and you can see that the `src/` directory has the following structure: