> For AI agents: the complete documentation index is available at /zh/llms.txt, the full documentation bundle is available at /zh/llms-full.txt.

# routes/

应用使用 [约定式路由](/zh/guides/basic-features/routes/routes.md#约定式路由) 时的入口标识。

约定式路由以 `routes/` 为约定的入口， 会分析 `src/routes` 目录下的文件得到客户端路由配置。

任何在 `src/routes` 下的 `layout.tsx` 和 `page.tsx` 都会作为应用的路由：

```bash
.
└── routes
    ├── layout.tsx  # [!code highlight]
    ├── page.tsx # [!code highlight]
    └── user
        ├── layout.tsx
        └── page.tsx
```

## 基本示例

`routes` 目录下的目录名会作为路由 url 的映射，其中 `layout.tsx` 中作为布局组件，`page.tsx` 作为内容组件，是整条路由的叶子节点，例如以下目录结构：

```bash
.
└── routes
    ├── page.tsx
    └── user
        └── page.tsx
```

会产出下面两条路由：

- `/`
- `/user`

## 动态路由

如果路由文件的目录名以 `[]` 命名，生成的路由会作为动态路由。例如以下文件目录：

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

`routes/[id]/page.tsx` 文件会转为 `/:id` 路由。除了可以确切匹配的 `/blog` 路由，其他所有 `/xxx` 都会匹配到该路由。

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

在使用 [loader](/zh/guides/basic-features/data/data-fetch.md#loader-函数) 函数获取数据时，`params` 会作为 `loader` 函数的入参，通过 `params` 的属性可以获取到对应的参数。

## 布局组件

如下面的例子，可以通过添加 `layout.tsx`，为所有路由组件添加公共的布局组件：

```bash
.
└── routes
    ├── layout.tsx
    ├── page.tsx
    └── user
        ├── layout.tsx
        └── page.tsx
```

在布局组件中可以通过使用 `<Outlet>` 表示子组件：

```tsx title=routes/layout.tsx
import { Link, Outlet, useLoaderData } from '@modern-js/runtime/router';

export default () => {
  return (
    <>
      <Outlet></Outlet>
    </>
  );
};
```

:::note
`<Outlet>` 是 React Router v7 中新的 API，详情可以查看 [Outlet](https://reactrouter.com/en/main/components/outlet#outlet).

:::