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

# routes/

The identifier for the entry point when the application uses [Conventional Routing](/guides/basic-features/routes/routes.md#conventional-routing).

Conventional routing uses `routes/` as the convention for the entry point and analyzes the files in the `src/routes` directory to obtain the client-side routing configuration.

Any `layout.tsx` and `page.tsx` under `src/routes` will be used as the application's routes:

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

## Basic Example

The directory name under `routes` will be used as the mapping of the route URL. `layout.tsx` is used as the layout component and `page.tsx` is used as the content component in the routing. They are the leaf nodes of the entire route. For example, the following directory structure:

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

will generate two routes:

- `/`
- `/user`

## Dynamic Routing

If the directory name of the route file is named with `[]`, the generated route will be used as a dynamic route. For example, the following file directory:

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

The `routes/[id]/page.tsx` file will be converted to the `/:id` route. Except for the `/blog` route that can be matched exactly, all other `/xxx` routes will be matched to this route.

In the component, you can use [useParams](/apis/app/runtime/router/router.md#useparams) to obtain the corresponding named parameter.

When using the [loader](/guides/basic-features/data/data-fetch.md#the-loader-function) function to obtain data, `params` will be passed as an input parameter to the `loader` function, and the corresponding parameter can be obtained through the attribute of `params`.

## Layout Component

In the following example, a common layout component can be added to all route components by adding `layout.tsx`:

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

In the layout component, you can use `<Outlet>` to represent the child components:

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

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

:::note
`<Outlet>` is an API provided by React Router. For details, see [Outlet](https://reactrouter.com/en/main/components/outlet#outlet).

:::