Skip to content

Commit

Permalink
feat: add optional dynamic routes docs
Browse files Browse the repository at this point in the history
  • Loading branch information
zllkjc committed Apr 17, 2023
1 parent bd52693 commit 82c61c0
Show file tree
Hide file tree
Showing 2 changed files with 40 additions and 0 deletions.
20 changes: 20 additions & 0 deletions packages/document/main-doc/docs/en/apis/app/hooks/src/routes.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,26 @@ In the component, you can get the corresponding parameters by [useParams](/apis/

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`.

## Dynamic Optional Routes

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`
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -169,6 +169,26 @@ export default () => {

在 loader 中,params 会作为 [loader](/guides/basic-features/data-fetch#loader-函数) 的入参,通过 `params.xxx` 可以获取。

### 动态可选路由

通过 `[$]` 命名的文件目录,生成的路由会作为动态路由。例如以下文件目录:

```
└── routes
├── user
│ └── [id$]
│ └── page.tsx
├── blog
│ └── page.tsx
└── page.tsx
```

`routes/user/[id$]/page.tsx` 文件会转为 `/user/:id?` 路由。`/user` 下的所有路由都会匹配到该路由,并且 `id` 参数可选存在。通常在区分**创建****编辑**时,可以使用该路由。

在组件中,可以通过 [useParams](/apis/app/runtime/router/router#useparams) 获取对应命名的参数。

在 loader 中,params 会作为 [loader](/guides/basic-features/data-fetch#loader-函数) 的入参,通过 `params.xxx` 可以获取。

### 通配路由

如果在 routes 目录下创建 `$.tsx` 文件,该文件会作为通配路由组件,当没有匹配的路由时,会渲染该路由组件。
Expand Down

0 comments on commit 82c61c0

Please sign in to comment.