@modern-js/main-doc 0.0.0-next-20230221142908 → 0.0.0-next-20230222140615
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 +2 -2
- package/en/configure/app/dev/host.mdx +13 -0
- package/en/guides/basic-features/data-fetch.mdx +4 -4
- package/en/guides/basic-features/routes.mdx +16 -0
- package/en/guides/concept/builder.mdx +1 -1
- package/package.json +3 -3
- package/scripts/summary.en.json +1 -1
- package/scripts/summary.zh.json +1 -1
- package/zh/configure/app/dev/host.mdx +13 -0
- package/zh/guides/basic-features/data-fetch.mdx +4 -4
- package/zh/guides/basic-features/routes.mdx +16 -0
package/CHANGELOG.md
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
# @modern-js/main-doc
|
2
2
|
|
3
|
-
## 0.0.0-next-
|
3
|
+
## 0.0.0-next-20230222140615
|
4
4
|
|
5
5
|
### Patch Changes
|
6
6
|
|
@@ -19,4 +19,4 @@
|
|
19
19
|
- Updated dependencies [88f7b340d]
|
20
20
|
- Updated dependencies [107f674fd]
|
21
21
|
- Updated dependencies [fae9d1bd8]
|
22
|
-
- @modern-js/builder-doc@0.0.0-next-
|
22
|
+
- @modern-js/builder-doc@0.0.0-next-20230222140615
|
@@ -0,0 +1,13 @@
|
|
1
|
+
---
|
2
|
+
sidebar_label: host
|
3
|
+
---
|
4
|
+
|
5
|
+
# dev.host
|
6
|
+
|
7
|
+
:::tip
|
8
|
+
This config is provided by Modern.js Builder, more detail can see [dev.host](https://modernjs.dev/builder/en/api/config-dev.html#devhost).
|
9
|
+
:::
|
10
|
+
|
11
|
+
import Main from '@modern-js/builder-doc/docs/en/config/dev/host.md'
|
12
|
+
|
13
|
+
<Main />
|
@@ -81,9 +81,9 @@ When a routing file is passed through `[]`, it is passed as a [dynamic route](/g
|
|
81
81
|
|
82
82
|
```tsx
|
83
83
|
// routes/user/[id]/page.loader.tsx
|
84
|
-
import {
|
84
|
+
import { LoaderFunctionArgs } from '@modern-js/runtime/router';
|
85
85
|
|
86
|
-
export default async ({ params }:
|
86
|
+
export default async ({ params }: LoaderFunctionArgs) => {
|
87
87
|
const { id } = params;
|
88
88
|
const res = await fetch(`https://api/user/${id}`);
|
89
89
|
return res.json();
|
@@ -100,9 +100,9 @@ A common usage scenario is to obtain query parameters via `request`:
|
|
100
100
|
|
101
101
|
```tsx
|
102
102
|
// routes/user/[id]/page.loader.ts
|
103
|
-
import {
|
103
|
+
import { LoaderFunctionArgs } from '@modern-js/runtime/router';
|
104
104
|
|
105
|
-
export default async ({ request }:
|
105
|
+
export default async ({ request }: LoaderFunctionArgs) => {
|
106
106
|
const url = new URL(request.url);
|
107
107
|
const userId = url.searchParams.get('id');
|
108
108
|
return queryUser(userId);
|
@@ -225,6 +225,22 @@ When the component exists in the routing directory, all routing switches under t
|
|
225
225
|
|
226
226
|
When a route jumps from `/` to `/blog`, if the JS Chunk of the `<Blog>` component is not loaded, the component UI exported in `loading.tsx` will be displayed first. But when jumping from `/blog` to `/blog/20220101`, it will not be displayed.
|
227
227
|
|
228
|
+
### Redirect
|
229
|
+
|
230
|
+
You can redirect routes by creating a [`data loader`](/guides/basic-features/data-fetch) file, Suppose you have the file `routes/user/page.tsx` and you want to redirect the route corresponding to this file, you can create the file `routes/user/page.loader.ts`:
|
231
|
+
|
232
|
+
```ts title="routes/user/page.loader.ts"
|
233
|
+
import { redirect } from "@edenx/runtime/router"
|
234
|
+
|
235
|
+
export default () => {
|
236
|
+
const user = await getUser();
|
237
|
+
if(!user){
|
238
|
+
return redirect('/login');
|
239
|
+
}
|
240
|
+
return null;
|
241
|
+
}
|
242
|
+
```
|
243
|
+
|
228
244
|
### ErrorBoundary
|
229
245
|
|
230
246
|
In each layer directory under `routes/`, the developer can also define a `error.tsx` file, and export a `<ErrorBoundary>` component by default.
|
@@ -14,7 +14,7 @@ From the perspective of building, Modern.js is divided into three layers, from t
|
|
14
14
|
|
15
15
|
- Upper-layer framework: Modern.js.
|
16
16
|
- Universal build engine: Modern.js Builder.
|
17
|
-
- Low-level bundlers: webpack and
|
17
|
+
- Low-level bundlers: webpack and rspack.
|
18
18
|
|
19
19
|
<img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/builder-layers-1117.png" style={{ maxWidth: '540px' }} />
|
20
20
|
|
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-20230222140615",
|
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-20230222140615"
|
21
21
|
},
|
22
22
|
"devDependencies": {
|
23
23
|
"ts-node": "^10",
|
@@ -25,7 +25,7 @@
|
|
25
25
|
"fs-extra": "^10",
|
26
26
|
"@types/node": "^16",
|
27
27
|
"@types/fs-extra": "^9",
|
28
|
-
"@modern-js/builder-doc": "0.0.0-next-
|
28
|
+
"@modern-js/builder-doc": "0.0.0-next-20230222140615"
|
29
29
|
},
|
30
30
|
"scripts": {
|
31
31
|
"build": "npx ts-node ./scripts/sync.ts"
|
package/scripts/summary.en.json
CHANGED
@@ -1 +1 @@
|
|
1
|
-
[{"name":"assetPrefix","dirname":"dev"},{"name":"beforeStartUrl","dirname":"dev"},{"name":"hmr","dirname":"dev"},{"name":"https","dirname":"dev"},{"name":"port","dirname":"dev"},{"name":"progressBar","dirname":"dev"},{"name":"startUrl","dirname":"dev"},{"name":"lazyCompilation","dirname":"experiments"},{"name":"appIcon","dirname":"html"},{"name":"crossorigin","dirname":"html"},{"name":"disableHtmlFolder","dirname":"html"},{"name":"favicon","dirname":"html"},{"name":"faviconByEntries","dirname":"html"},{"name":"inject","dirname":"html"},{"name":"injectByEntries","dirname":"html"},{"name":"meta","dirname":"html"},{"name":"metaByEntries","dirname":"html"},{"name":"mountId","dirname":"html"},{"name":"tags","dirname":"html"},{"name":"tagsByEntries","dirname":"html"},{"name":"template","dirname":"html"},{"name":"templateByEntries","dirname":"html"},{"name":"templateParameters","dirname":"html"},{"name":"templateParametersByEntries","dirname":"html"},{"name":"title","dirname":"html"},{"name":"titleByEntries","dirname":"html"},{"name":"assetPrefix","dirname":"output"},{"name":"assetsRetry","dirname":"output"},{"name":"charset","dirname":"output"},{"name":"cleanDistPath","dirname":"output"},{"name":"convertToRem","dirname":"output"},{"name":"copy","dirname":"output"},{"name":"cssModuleLocalIdentName","dirname":"output"},{"name":"dataUriLimit","dirname":"output"},{"name":"disableCssExtract","dirname":"output"},{"name":"disableCssModuleExtension","dirname":"output"},{"name":"disableFilenameHash","dirname":"output"},{"name":"disableInlineRuntimeChunk","dirname":"output"},{"name":"disableMinimize","dirname":"output"},{"name":"disableSourceMap","dirname":"output"},{"name":"disableTsChecker","dirname":"output"},{"name":"distPath","dirname":"output"},{"name":"enableAssetFallback","dirname":"output"},{"name":"enableAssetManifest","dirname":"output"},{"name":"enableCssModuleTSDeclaration","dirname":"output"},{"name":"enableInlineScripts","dirname":"output"},{"name":"enableInlineStyles","dirname":"output"},{"name":"enableLatestDecorators","dirname":"output"},{"name":"externals","dirname":"output"},{"name":"filename","dirname":"output"},{"name":"legalComments","dirname":"output"},{"name":"overrideBrowserslist","dirname":"output"},{"name":"polyfill","dirname":"output"},{"name":"svgDefaultExport","dirname":"output"},{"name":"buildCache","dirname":"performance"},{"name":"bundleAnalyze","dirname":"performance"},{"name":"chunkSplit","dirname":"performance"},{"name":"printFileSize","dirname":"performance"},{"name":"profile","dirname":"performance"},{"name":"removeConsole","dirname":"performance"},{"name":"removeMomentLocale","dirname":"performance"},{"name":"checkSyntax","dirname":"security"},{"name":"sri","dirname":"security"},{"name":"alias","dirname":"source"},{"name":"compileJsDataURI","dirname":"source"},{"name":"define","dirname":"source"},{"name":"exclude","dirname":"source"},{"name":"globalVars","dirname":"source"},{"name":"include","dirname":"source"},{"name":"moduleScopes","dirname":"source"},{"name":"preEntry","dirname":"source"},{"name":"resolveExtensionPrefix","dirname":"source"},{"name":"resolveMainFields","dirname":"source"},{"name":"autoprefixer","dirname":"tools"},{"name":"babel","dirname":"tools"},{"name":"cssExtract","dirname":"tools"},{"name":"cssLoader","dirname":"tools"},{"name":"devServer","dirname":"tools"},{"name":"htmlPlugin","dirname":"tools"},{"name":"inspector","dirname":"tools"},{"name":"less","dirname":"tools"},{"name":"minifyCss","dirname":"tools"},{"name":"postcss","dirname":"tools"},{"name":"pug","dirname":"tools"},{"name":"rspack","dirname":"tools"},{"name":"sass","dirname":"tools"},{"name":"styleLoader","dirname":"tools"},{"name":"styledComponents","dirname":"tools"},{"name":"terser","dirname":"tools"},{"name":"tsChecker","dirname":"tools"},{"name":"tsLoader","dirname":"tools"},{"name":"webpack","dirname":"tools"},{"name":"webpackChain","dirname":"tools"}]
|
1
|
+
[{"name":"assetPrefix","dirname":"dev"},{"name":"beforeStartUrl","dirname":"dev"},{"name":"hmr","dirname":"dev"},{"name":"host","dirname":"dev"},{"name":"https","dirname":"dev"},{"name":"port","dirname":"dev"},{"name":"progressBar","dirname":"dev"},{"name":"startUrl","dirname":"dev"},{"name":"lazyCompilation","dirname":"experiments"},{"name":"appIcon","dirname":"html"},{"name":"crossorigin","dirname":"html"},{"name":"disableHtmlFolder","dirname":"html"},{"name":"favicon","dirname":"html"},{"name":"faviconByEntries","dirname":"html"},{"name":"inject","dirname":"html"},{"name":"injectByEntries","dirname":"html"},{"name":"meta","dirname":"html"},{"name":"metaByEntries","dirname":"html"},{"name":"mountId","dirname":"html"},{"name":"tags","dirname":"html"},{"name":"tagsByEntries","dirname":"html"},{"name":"template","dirname":"html"},{"name":"templateByEntries","dirname":"html"},{"name":"templateParameters","dirname":"html"},{"name":"templateParametersByEntries","dirname":"html"},{"name":"title","dirname":"html"},{"name":"titleByEntries","dirname":"html"},{"name":"assetPrefix","dirname":"output"},{"name":"assetsRetry","dirname":"output"},{"name":"charset","dirname":"output"},{"name":"cleanDistPath","dirname":"output"},{"name":"convertToRem","dirname":"output"},{"name":"copy","dirname":"output"},{"name":"cssModuleLocalIdentName","dirname":"output"},{"name":"dataUriLimit","dirname":"output"},{"name":"disableCssExtract","dirname":"output"},{"name":"disableCssModuleExtension","dirname":"output"},{"name":"disableFilenameHash","dirname":"output"},{"name":"disableInlineRuntimeChunk","dirname":"output"},{"name":"disableMinimize","dirname":"output"},{"name":"disableSourceMap","dirname":"output"},{"name":"disableTsChecker","dirname":"output"},{"name":"distPath","dirname":"output"},{"name":"enableAssetFallback","dirname":"output"},{"name":"enableAssetManifest","dirname":"output"},{"name":"enableCssModuleTSDeclaration","dirname":"output"},{"name":"enableInlineScripts","dirname":"output"},{"name":"enableInlineStyles","dirname":"output"},{"name":"enableLatestDecorators","dirname":"output"},{"name":"externals","dirname":"output"},{"name":"filename","dirname":"output"},{"name":"legalComments","dirname":"output"},{"name":"overrideBrowserslist","dirname":"output"},{"name":"polyfill","dirname":"output"},{"name":"svgDefaultExport","dirname":"output"},{"name":"buildCache","dirname":"performance"},{"name":"bundleAnalyze","dirname":"performance"},{"name":"chunkSplit","dirname":"performance"},{"name":"printFileSize","dirname":"performance"},{"name":"profile","dirname":"performance"},{"name":"removeConsole","dirname":"performance"},{"name":"removeMomentLocale","dirname":"performance"},{"name":"checkSyntax","dirname":"security"},{"name":"sri","dirname":"security"},{"name":"alias","dirname":"source"},{"name":"compileJsDataURI","dirname":"source"},{"name":"define","dirname":"source"},{"name":"exclude","dirname":"source"},{"name":"globalVars","dirname":"source"},{"name":"include","dirname":"source"},{"name":"moduleScopes","dirname":"source"},{"name":"preEntry","dirname":"source"},{"name":"resolveExtensionPrefix","dirname":"source"},{"name":"resolveMainFields","dirname":"source"},{"name":"autoprefixer","dirname":"tools"},{"name":"babel","dirname":"tools"},{"name":"cssExtract","dirname":"tools"},{"name":"cssLoader","dirname":"tools"},{"name":"devServer","dirname":"tools"},{"name":"htmlPlugin","dirname":"tools"},{"name":"inspector","dirname":"tools"},{"name":"less","dirname":"tools"},{"name":"minifyCss","dirname":"tools"},{"name":"postcss","dirname":"tools"},{"name":"pug","dirname":"tools"},{"name":"rspack","dirname":"tools"},{"name":"sass","dirname":"tools"},{"name":"styleLoader","dirname":"tools"},{"name":"styledComponents","dirname":"tools"},{"name":"terser","dirname":"tools"},{"name":"tsChecker","dirname":"tools"},{"name":"tsLoader","dirname":"tools"},{"name":"webpack","dirname":"tools"},{"name":"webpackChain","dirname":"tools"}]
|
package/scripts/summary.zh.json
CHANGED
@@ -1 +1 @@
|
|
1
|
-
[{"name":"assetPrefix","dirname":"dev"},{"name":"beforeStartUrl","dirname":"dev"},{"name":"hmr","dirname":"dev"},{"name":"https","dirname":"dev"},{"name":"port","dirname":"dev"},{"name":"progressBar","dirname":"dev"},{"name":"startUrl","dirname":"dev"},{"name":"lazyCompilation","dirname":"experiments"},{"name":"appIcon","dirname":"html"},{"name":"crossorigin","dirname":"html"},{"name":"disableHtmlFolder","dirname":"html"},{"name":"favicon","dirname":"html"},{"name":"faviconByEntries","dirname":"html"},{"name":"inject","dirname":"html"},{"name":"injectByEntries","dirname":"html"},{"name":"meta","dirname":"html"},{"name":"metaByEntries","dirname":"html"},{"name":"mountId","dirname":"html"},{"name":"tags","dirname":"html"},{"name":"tagsByEntries","dirname":"html"},{"name":"template","dirname":"html"},{"name":"templateByEntries","dirname":"html"},{"name":"templateParameters","dirname":"html"},{"name":"templateParametersByEntries","dirname":"html"},{"name":"title","dirname":"html"},{"name":"titleByEntries","dirname":"html"},{"name":"assetPrefix","dirname":"output"},{"name":"assetsRetry","dirname":"output"},{"name":"charset","dirname":"output"},{"name":"cleanDistPath","dirname":"output"},{"name":"convertToRem","dirname":"output"},{"name":"copy","dirname":"output"},{"name":"cssModuleLocalIdentName","dirname":"output"},{"name":"dataUriLimit","dirname":"output"},{"name":"disableCssExtract","dirname":"output"},{"name":"disableCssModuleExtension","dirname":"output"},{"name":"disableFilenameHash","dirname":"output"},{"name":"disableInlineRuntimeChunk","dirname":"output"},{"name":"disableMinimize","dirname":"output"},{"name":"disableSourceMap","dirname":"output"},{"name":"disableTsChecker","dirname":"output"},{"name":"distPath","dirname":"output"},{"name":"enableAssetFallback","dirname":"output"},{"name":"enableAssetManifest","dirname":"output"},{"name":"enableCssModuleTSDeclaration","dirname":"output"},{"name":"enableInlineScripts","dirname":"output"},{"name":"enableInlineStyles","dirname":"output"},{"name":"enableLatestDecorators","dirname":"output"},{"name":"externals","dirname":"output"},{"name":"filename","dirname":"output"},{"name":"legalComments","dirname":"output"},{"name":"overrideBrowserslist","dirname":"output"},{"name":"polyfill","dirname":"output"},{"name":"svgDefaultExport","dirname":"output"},{"name":"buildCache","dirname":"performance"},{"name":"bundleAnalyze","dirname":"performance"},{"name":"chunkSplit","dirname":"performance"},{"name":"printFileSize","dirname":"performance"},{"name":"profile","dirname":"performance"},{"name":"removeConsole","dirname":"performance"},{"name":"removeMomentLocale","dirname":"performance"},{"name":"checkSyntax","dirname":"security"},{"name":"sri","dirname":"security"},{"name":"alias","dirname":"source"},{"name":"compileJsDataURI","dirname":"source"},{"name":"define","dirname":"source"},{"name":"exclude","dirname":"source"},{"name":"globalVars","dirname":"source"},{"name":"include","dirname":"source"},{"name":"moduleScopes","dirname":"source"},{"name":"preEntry","dirname":"source"},{"name":"resolveExtensionPrefix","dirname":"source"},{"name":"resolveMainFields","dirname":"source"},{"name":"autoprefixer","dirname":"tools"},{"name":"babel","dirname":"tools"},{"name":"cssExtract","dirname":"tools"},{"name":"cssLoader","dirname":"tools"},{"name":"devServer","dirname":"tools"},{"name":"htmlPlugin","dirname":"tools"},{"name":"inspector","dirname":"tools"},{"name":"less","dirname":"tools"},{"name":"minifyCss","dirname":"tools"},{"name":"postcss","dirname":"tools"},{"name":"pug","dirname":"tools"},{"name":"rspack","dirname":"tools"},{"name":"sass","dirname":"tools"},{"name":"styleLoader","dirname":"tools"},{"name":"styledComponents","dirname":"tools"},{"name":"terser","dirname":"tools"},{"name":"tsChecker","dirname":"tools"},{"name":"tsLoader","dirname":"tools"},{"name":"webpack","dirname":"tools"},{"name":"webpackChain","dirname":"tools"}]
|
1
|
+
[{"name":"assetPrefix","dirname":"dev"},{"name":"beforeStartUrl","dirname":"dev"},{"name":"hmr","dirname":"dev"},{"name":"host","dirname":"dev"},{"name":"https","dirname":"dev"},{"name":"port","dirname":"dev"},{"name":"progressBar","dirname":"dev"},{"name":"startUrl","dirname":"dev"},{"name":"lazyCompilation","dirname":"experiments"},{"name":"appIcon","dirname":"html"},{"name":"crossorigin","dirname":"html"},{"name":"disableHtmlFolder","dirname":"html"},{"name":"favicon","dirname":"html"},{"name":"faviconByEntries","dirname":"html"},{"name":"inject","dirname":"html"},{"name":"injectByEntries","dirname":"html"},{"name":"meta","dirname":"html"},{"name":"metaByEntries","dirname":"html"},{"name":"mountId","dirname":"html"},{"name":"tags","dirname":"html"},{"name":"tagsByEntries","dirname":"html"},{"name":"template","dirname":"html"},{"name":"templateByEntries","dirname":"html"},{"name":"templateParameters","dirname":"html"},{"name":"templateParametersByEntries","dirname":"html"},{"name":"title","dirname":"html"},{"name":"titleByEntries","dirname":"html"},{"name":"assetPrefix","dirname":"output"},{"name":"assetsRetry","dirname":"output"},{"name":"charset","dirname":"output"},{"name":"cleanDistPath","dirname":"output"},{"name":"convertToRem","dirname":"output"},{"name":"copy","dirname":"output"},{"name":"cssModuleLocalIdentName","dirname":"output"},{"name":"dataUriLimit","dirname":"output"},{"name":"disableCssExtract","dirname":"output"},{"name":"disableCssModuleExtension","dirname":"output"},{"name":"disableFilenameHash","dirname":"output"},{"name":"disableInlineRuntimeChunk","dirname":"output"},{"name":"disableMinimize","dirname":"output"},{"name":"disableSourceMap","dirname":"output"},{"name":"disableTsChecker","dirname":"output"},{"name":"distPath","dirname":"output"},{"name":"enableAssetFallback","dirname":"output"},{"name":"enableAssetManifest","dirname":"output"},{"name":"enableCssModuleTSDeclaration","dirname":"output"},{"name":"enableInlineScripts","dirname":"output"},{"name":"enableInlineStyles","dirname":"output"},{"name":"enableLatestDecorators","dirname":"output"},{"name":"externals","dirname":"output"},{"name":"filename","dirname":"output"},{"name":"legalComments","dirname":"output"},{"name":"overrideBrowserslist","dirname":"output"},{"name":"polyfill","dirname":"output"},{"name":"svgDefaultExport","dirname":"output"},{"name":"buildCache","dirname":"performance"},{"name":"bundleAnalyze","dirname":"performance"},{"name":"chunkSplit","dirname":"performance"},{"name":"printFileSize","dirname":"performance"},{"name":"profile","dirname":"performance"},{"name":"removeConsole","dirname":"performance"},{"name":"removeMomentLocale","dirname":"performance"},{"name":"checkSyntax","dirname":"security"},{"name":"sri","dirname":"security"},{"name":"alias","dirname":"source"},{"name":"compileJsDataURI","dirname":"source"},{"name":"define","dirname":"source"},{"name":"exclude","dirname":"source"},{"name":"globalVars","dirname":"source"},{"name":"include","dirname":"source"},{"name":"moduleScopes","dirname":"source"},{"name":"preEntry","dirname":"source"},{"name":"resolveExtensionPrefix","dirname":"source"},{"name":"resolveMainFields","dirname":"source"},{"name":"autoprefixer","dirname":"tools"},{"name":"babel","dirname":"tools"},{"name":"cssExtract","dirname":"tools"},{"name":"cssLoader","dirname":"tools"},{"name":"devServer","dirname":"tools"},{"name":"htmlPlugin","dirname":"tools"},{"name":"inspector","dirname":"tools"},{"name":"less","dirname":"tools"},{"name":"minifyCss","dirname":"tools"},{"name":"postcss","dirname":"tools"},{"name":"pug","dirname":"tools"},{"name":"rspack","dirname":"tools"},{"name":"sass","dirname":"tools"},{"name":"styleLoader","dirname":"tools"},{"name":"styledComponents","dirname":"tools"},{"name":"terser","dirname":"tools"},{"name":"tsChecker","dirname":"tools"},{"name":"tsLoader","dirname":"tools"},{"name":"webpack","dirname":"tools"},{"name":"webpackChain","dirname":"tools"}]
|
@@ -0,0 +1,13 @@
|
|
1
|
+
---
|
2
|
+
sidebar_label: host
|
3
|
+
---
|
4
|
+
|
5
|
+
# dev.host
|
6
|
+
|
7
|
+
:::tip
|
8
|
+
该配置由 Modern.js Builder 提供,更多信息可参考 [dev.host](https://modernjs.dev/builder/api/config-dev.html#devhost)。
|
9
|
+
:::
|
10
|
+
|
11
|
+
import Main from '@modern-js/builder-doc/docs/zh/config/dev/host.md'
|
12
|
+
|
13
|
+
<Main />
|
@@ -82,9 +82,9 @@ export default async (): Promise<ProfileData> => {
|
|
82
82
|
|
83
83
|
```tsx
|
84
84
|
// routes/user/[id]/page.loader.ts
|
85
|
-
import {
|
85
|
+
import { LoaderFunctionArgs } from '@modern-js/runtime/router';
|
86
86
|
|
87
|
-
export default async ({ params }:
|
87
|
+
export default async ({ params }: LoaderFunctionArgs) => {
|
88
88
|
const { id } = params;
|
89
89
|
const res = await fetch(`https://api/user/${id}`);
|
90
90
|
return res.json();
|
@@ -101,9 +101,9 @@ export default async ({ params }: LoaderArgs) => {
|
|
101
101
|
|
102
102
|
```tsx
|
103
103
|
// routes/user/[id]/page.loader.ts
|
104
|
-
import {
|
104
|
+
import { LoaderFunctionArgs } from '@modern-js/runtime/router';
|
105
105
|
|
106
|
-
export default async ({ request }:
|
106
|
+
export default async ({ request }: LoaderFunctionArgs) => {
|
107
107
|
const url = new URL(request.url);
|
108
108
|
const userId = url.searchParams.get('id');
|
109
109
|
return queryUser(userId);
|
@@ -292,6 +292,22 @@ Modern.js 建议必须有根 layout 和根 loading。
|
|
292
292
|
|
293
293
|
同理,当路由从 `/` 或者 `/blog` 跳转到 `/blog/123` 时,如果 `blog/[id]/page` 组件的 JS Chunk 还未加载,也会先展示 `loading.tsx` 中导出的组件 UI。
|
294
294
|
|
295
|
+
### 路由重定向
|
296
|
+
|
297
|
+
可以通过创建 [`data loader`](/guides/basic-features/data-fetch) 文件做路由的重定向,如有文件 `routes/user/page.tsx`,想对这个文件对应的路由做重定向,可以创建 `routes/user/page.loader.ts` 文件:
|
298
|
+
|
299
|
+
```ts title="routes/user/page.loader.ts"
|
300
|
+
import { redirect } from "@edenx/runtime/router"
|
301
|
+
|
302
|
+
export default () => {
|
303
|
+
const user = await getUser();
|
304
|
+
if(!user){
|
305
|
+
return redirect('/login');
|
306
|
+
}
|
307
|
+
return null;
|
308
|
+
}
|
309
|
+
```
|
310
|
+
|
295
311
|
### 错误处理
|
296
312
|
|
297
313
|
`routes/` 下每一层目录中,开发者同样可以定义一个 `error.tsx` 文件,默认导出一个 `<ErrorBoundary>` 组件。
|