@modern-js/main-doc 0.0.0-next-1681740447801 → 0.0.0-next-1681819855170
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +8 -2
- package/docs/en/apis/app/hooks/src/routes.mdx +20 -0
- package/docs/en/components/init-app.mdx +5 -5
- package/docs/zh/components/init-app.mdx +5 -5
- package/docs/zh/guides/basic-features/routes.mdx +20 -0
- package/docs/zh/guides/topic-detail/monorepo/create-sub-project.mdx +5 -5
- package/package.json +5 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,14 +1,20 @@
|
|
|
1
1
|
# @modern-js/main-doc
|
|
2
2
|
|
|
3
|
-
## 0.0.0-next-
|
|
3
|
+
## 0.0.0-next-1681819855170
|
|
4
4
|
|
|
5
5
|
### Patch Changes
|
|
6
6
|
|
|
7
7
|
- 60a81d05d: feat: add ssr.inlineScript for use inline json instead inline script when ssr
|
|
8
8
|
feat: 添加 ssr.inlineScript 用于在 ssr 模式下使用内联 json 而不是内联脚本
|
|
9
|
+
- 432ac8b88: chore(cli): improve commands descriptions
|
|
10
|
+
|
|
11
|
+
chore(cli): 优化命令的描述文案
|
|
12
|
+
|
|
13
|
+
- de84d9494: feat: add optional dynamic routes docs
|
|
14
|
+
feat: 添加可选动态路由文档
|
|
9
15
|
- Updated dependencies [fefd1c564]
|
|
10
16
|
- Updated dependencies [1f34dbae9]
|
|
11
|
-
- @modern-js/builder-doc@0.0.0-next-
|
|
17
|
+
- @modern-js/builder-doc@0.0.0-next-1681819855170
|
|
12
18
|
|
|
13
19
|
## 2.13.4
|
|
14
20
|
|
|
@@ -56,6 +56,26 @@ In the component, you can get the corresponding parameters by [useParams](/apis/
|
|
|
56
56
|
|
|
57
57
|
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`.
|
|
58
58
|
|
|
59
|
+
## Dynamic Optional Routes
|
|
60
|
+
|
|
61
|
+
By using file directories named with `[$]`, the generated routes will be treated as dynamic routes. For example, the following file directory:
|
|
62
|
+
|
|
63
|
+
```
|
|
64
|
+
└── routes
|
|
65
|
+
├── user
|
|
66
|
+
│ └── [id$]
|
|
67
|
+
│ └── page.tsx
|
|
68
|
+
├── blog
|
|
69
|
+
│ └── page.tsx
|
|
70
|
+
└── page.tsx
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
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**.
|
|
74
|
+
|
|
75
|
+
In the component, you can get the corresponding named parameters using [useParams](/apis/app/runtime/router/router#useparams).
|
|
76
|
+
|
|
77
|
+
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`.
|
|
78
|
+
|
|
59
79
|
## Layout component
|
|
60
80
|
|
|
61
81
|
As in the example below, you can add a common layout component for all routing components by adding `layout.tsx`
|
|
@@ -13,11 +13,11 @@ After create the project, Modern.js automatically installs dependency and create
|
|
|
13
13
|
[INFO] git repository has been automatically created
|
|
14
14
|
[INFO] Success!
|
|
15
15
|
You can run the following command in the directory of the new project:
|
|
16
|
-
pnpm run dev #
|
|
17
|
-
pnpm run build # Build the
|
|
18
|
-
pnpm run serve #
|
|
19
|
-
pnpm run lint #
|
|
20
|
-
pnpm run new #
|
|
16
|
+
pnpm run dev # Starting the dev server
|
|
17
|
+
pnpm run build # Build the app for production
|
|
18
|
+
pnpm run serve # Preview the production build locally
|
|
19
|
+
pnpm run lint # Run ESLint and automatically fix problems
|
|
20
|
+
pnpm run new # Enable optional features or add a new entry
|
|
21
21
|
```
|
|
22
22
|
|
|
23
23
|
:::note
|
|
@@ -13,11 +13,11 @@ Modern.js 生成器会提供一个可交互的问答界面,根据结果初始
|
|
|
13
13
|
[INFO] git 仓库初始化成功
|
|
14
14
|
[INFO] 创建成功!
|
|
15
15
|
可在新项目的目录下运行以下命令:
|
|
16
|
-
pnpm run dev #
|
|
17
|
-
pnpm run build #
|
|
18
|
-
pnpm run serve #
|
|
19
|
-
pnpm run lint #
|
|
20
|
-
pnpm run new #
|
|
16
|
+
pnpm run dev # 启动开发服务器
|
|
17
|
+
pnpm run build # 构建生产环境产物
|
|
18
|
+
pnpm run serve # 启动生产环境服务
|
|
19
|
+
pnpm run lint # 运行 ESLint 并自动修复问题
|
|
20
|
+
pnpm run new # 启用可选功能或创建项目要素
|
|
21
21
|
```
|
|
22
22
|
|
|
23
23
|
:::note
|
|
@@ -169,6 +169,26 @@ export default () => {
|
|
|
169
169
|
|
|
170
170
|
在 loader 中,params 会作为 [loader](/guides/basic-features/data-fetch#loader-函数) 的入参,通过 `params.xxx` 可以获取。
|
|
171
171
|
|
|
172
|
+
### 动态可选路由
|
|
173
|
+
|
|
174
|
+
通过 `[$]` 命名的文件目录,生成的路由会作为动态路由。例如以下文件目录:
|
|
175
|
+
|
|
176
|
+
```
|
|
177
|
+
└── routes
|
|
178
|
+
├── user
|
|
179
|
+
│ └── [id$]
|
|
180
|
+
│ └── page.tsx
|
|
181
|
+
├── blog
|
|
182
|
+
│ └── page.tsx
|
|
183
|
+
└── page.tsx
|
|
184
|
+
```
|
|
185
|
+
|
|
186
|
+
`routes/user/[id$]/page.tsx` 文件会转为 `/user/:id?` 路由。`/user` 下的所有路由都会匹配到该路由,并且 `id` 参数可选存在。通常在区分**创建**于**编辑**时,可以使用该路由。
|
|
187
|
+
|
|
188
|
+
在组件中,可以通过 [useParams](/apis/app/runtime/router/router#useparams) 获取对应命名的参数。
|
|
189
|
+
|
|
190
|
+
在 loader 中,params 会作为 [loader](/guides/basic-features/data-fetch#loader-函数) 的入参,通过 `params.xxx` 可以获取。
|
|
191
|
+
|
|
172
192
|
### 通配路由
|
|
173
193
|
|
|
174
194
|
如果在 routes 目录下创建 `$.tsx` 文件,该文件会作为通配路由组件,当没有匹配的路由时,会渲染该路由组件。
|
|
@@ -59,9 +59,9 @@ pnpm run new
|
|
|
59
59
|
[INFO] 依赖自动安装成功
|
|
60
60
|
[INFO] 创建成功!
|
|
61
61
|
可在新项目的目录下运行以下命令:
|
|
62
|
-
pnpm run dev #
|
|
63
|
-
pnpm run build #
|
|
64
|
-
pnpm run serve #
|
|
65
|
-
pnpm run lint #
|
|
66
|
-
pnpm run new #
|
|
62
|
+
pnpm run dev # 启动开发服务器
|
|
63
|
+
pnpm run build # 构建生产环境产物
|
|
64
|
+
pnpm run serve # 启动生产环境服务
|
|
65
|
+
pnpm run lint # 运行 ESLint 并自动修复问题
|
|
66
|
+
pnpm run new # 启用可选功能或创建项目要素
|
|
67
67
|
```
|
package/package.json
CHANGED
|
@@ -11,13 +11,13 @@
|
|
|
11
11
|
"modern",
|
|
12
12
|
"modern.js"
|
|
13
13
|
],
|
|
14
|
-
"version": "0.0.0-next-
|
|
14
|
+
"version": "0.0.0-next-1681819855170",
|
|
15
15
|
"publishConfig": {
|
|
16
16
|
"registry": "https://registry.npmjs.org/",
|
|
17
17
|
"access": "public"
|
|
18
18
|
},
|
|
19
19
|
"peerDependencies": {
|
|
20
|
-
"@modern-js/builder-doc": "0.0.0-next-
|
|
20
|
+
"@modern-js/builder-doc": "0.0.0-next-1681819855170"
|
|
21
21
|
},
|
|
22
22
|
"devDependencies": {
|
|
23
23
|
"classnames": "^2",
|
|
@@ -29,9 +29,9 @@
|
|
|
29
29
|
"fs-extra": "^10",
|
|
30
30
|
"@types/node": "^16",
|
|
31
31
|
"@types/fs-extra": "^9",
|
|
32
|
-
"@modern-js/builder-doc": "0.0.0-next-
|
|
33
|
-
"@modern-js/doc-
|
|
34
|
-
"@modern-js/doc-
|
|
32
|
+
"@modern-js/builder-doc": "0.0.0-next-1681819855170",
|
|
33
|
+
"@modern-js/doc-plugin-auto-sidebar": "0.0.0-next-1681819855170",
|
|
34
|
+
"@modern-js/doc-tools": "0.0.0-next-1681819855170"
|
|
35
35
|
},
|
|
36
36
|
"scripts": {
|
|
37
37
|
"dev": "modern dev",
|