Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Docs/optimize route group semantics #4957

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Docs/optimize route group semantics #4957

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6643d6e
docs: 优化路由分组语义
WinmezzZ Nov 16, 2023
97ed460
docs: 修改文案
WinmezzZ Nov 16, 2023
a80cd07
remove space
WinmezzZ Nov 16, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
8 changes: 5 additions & 3 deletions packages/document/main-doc/docs/en/guides/basic-features/routes.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -247,7 +247,7 @@ const params = useParams();
params['*']; // => 'aaa/bbb'
```

### No-path Layout
### Route Grouping

When the directory name starts with `__`, the directory name will not be converted to an actual route path. For example, the following file directory:

Expand All @@ -266,9 +266,9 @@ When the directory name starts with `__`, the directory name will not be convert

Modern.js will generate two routes, `/login` and `/signup`. The `__auth/layout.tsx` component will serve as the layout component for `login/page.tsx` and `signup/page.tsx`, but `__auth` will not be a route path segment.

This feature is very useful when you need to create independent layouts for certain types of routes or want to classify routes.
This feature is very useful when you need to create independent layouts or group routes for certain types of routes or want to classify routes.

### No Layout
### Route Flating

In some cases, the project requires complex routing, but these routes do not have independent UI layouts. If you create routes like ordinary file directories, it will result in deep directory levels.

Expand All @@ -290,6 +290,8 @@ When accessing the route, you will get the following UI layout:
</RootLayout>
```

This scheme avoids the traditional hierarchical file structure and achieves compactness and efficiency

### (WIP)Loading

In each directory under `routes/`, developers can create a `loading.tsx` file that exports a `<Loading>` component by default.
Expand Down
8 changes: 5 additions & 3 deletions packages/document/main-doc/docs/zh/guides/basic-features/routes.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -253,7 +253,7 @@ params['*']; // => 'aaa/bbb'

`$.tsx` 可以加入到 `routes` 目录下的任意目录中，一个常见的使用示例是添加 `routes/$.tsx` 文件去定制任意层级的 404 内容。

### 无路径布局
### 路由分组

当目录名以 \_\_ 开头时，对应的目录名不会转换为实际的路由路径，例如以下文件目录：

Expand All @@ -272,9 +272,9 @@ params['*']; // => 'aaa/bbb'

Modern.js 会生成 `/login` 和 `/sign` 两条路由，`__auth/layout.tsx` 组件会作为 `login/page.tsx` 和 `signup/page.tsx` 的布局组件，但`__auth` 不会作为路由路径片段。

当需要为某些类型的路由，做独立的布局，或是想要将路由做归类时，这一功能非常有用。
当需要为某些类型的路由，做独立的布局，或是想要将路由做归类和分组时，这一功能非常有用。

### 无布局路径
### 路由扁平化
WinmezzZ marked this conversation as resolved.
Show resolved Hide resolved

有些情况下，项目需要较为复杂的路由，但这些路由又不存在独立的 UI 布局，如果像普通文件目录那边创建路由会导致目录层级较深。

Expand All @@ -296,6 +296,8 @@ Modern.js 会生成 `/login` 和 `/sign` 两条路由，`__auth/layout.tsx` 组
</RootLayout>
```

这种方案避免了传统层级文件结构，实现了紧凑性和高效性

### (WIP)Loading

`routes/` 下每一层目录中，开发者可以创建 `loading.tsx` 文件，默认导出一个 `<Loading>` 组件。
Expand Down