routes/#

应用使用约定式路由时的入口标识。

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

任何在 src/routes 下的 layout.[tj]sx 和 page.[tj]sx 都会作为应用的路由：

1.
2└── routes
3    ├── layout.tsx
4    ├── page.tsx
5    └── user
6        ├── layout.tsx
7        └── page.tsx

基本示例#

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

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

会产出下面两条路由：

• /
• /user

动态路由#

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

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

在组件中，可以通过 useParams 获取对应命名的参数。

在使用 loader 函数获取数据时，params 会作为 loader 函数的入参，通过 params 的属性可以获取到对应的参数。

布局组件#

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

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

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

import { Link, Outlet, useLoaderData } from '@modern-js/runtime/router';

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