Skip to main content

文件约定式路由

icejs 推荐使用 配置式路由 进行路由管理。但同时也支持 文件约定式路由 方案,当项目中不存在 src/routes.[ts|js] 文件时,则会自动开启文件约定式路由模式。

文件约定式路由#

顾名思义,文件约定式路由会根据项目的目录结构自动生成路由配置,无需开发者手动配置。文件约定式路由虽然不需要用户手动配置,但因为路由配置本身存在很多规则,因此约定式路由也需要约定一系列的目录结构设计,这本身也有一定的学习成本。

基础路由#

假设 pages 的目录结构如下:

src/pages
└── About
└── index.tsx
└── Dashboard
├── a.tsx
└── b.tsx

那么,框架自动生成的路由配置如下:

export default [
{
path: '/about',
exact: true,
component: PageAbout,
},
{
path: '/dashboard/a',
exact: true,
component: PageDashboardA,
},
{
path: '/dashboard/b',
exact: true,
component: PageDashboardB,
},
];

404 路由#

如果 src/pages/404.[jsx|tsx] 或者 src/pages/404/index.[jsx|tsx] 文件存在,则将它作为 404 页面

index 路由#

如果 src/pages/index.[jsx|tsx] 文件存在,则会自动映射到 / 的路由。

嵌套路由#

框架约定页面目录下存在名为 _layout.[jsx|tsx] 时,会产生一个嵌套路由,当前目录和子目录均为子路由。

假设 pages 的目录结构如下:

src/pages
└── About
├── _layout.tsx
├── a.tsx
└── b.tsx
└── Dashboard
└── index.tsx

那么,框架自动生成的路由配置如下:

[
{
path: '/about',
exact: false,
component: LayoutAbout,
children: [
{
path: '/a',
exact: true,
component: PageAboutA,
},
{
path: '/b',
exact: true,
component: PageAboutB,
},
],
},
{
path: '/dashboard',
exact: true,
component: PageDashboard,
},
];

动态路由#

框架约定定义带参数的动态路由,需要创建对应的以下划线作为前缀的文件或目录。

  • 路径中 $ 作为文件夹或文件名的首个字符,标识一个动态路由,如 src/pages/app/$uid.tsx 会生成路由 /app/:uid
  • 路径中文件夹或文件名的首个和最后一个字符同时为 $,标识一个可选的动态路由,如 src/pages/app/$uid$.tsx 会生成路由 /app/:uid?

假设 pages 的目录结构如下:

src/pages
└── repo
├── $pid.tsx
└── index.tsx
└── $uid$.tsx

那么,框架自动生成的路由配置如下:

export default [
{
path: '/repo/:pid',
exact: true,
component: PageRepo$pid,
},
{
path: '/repo',
exact: true,
component: PageRepo,
},
{
path: '/:uid?',
exact: true,
component: Page$uid$,
},
];

全局 Layout#

如果 src/layouts/index.[jsx|tsx] 文件存在,则将它默认作为全局 layout

路由配置#

运行时配置#

详见

构建配置#

build.json 中,我们也可以自定义一些构建配置:

{
"router": {
// ...options
}
}

options:

  • configPath: 仅配置式路由,类型 string,默认值 'src/routes.[t|j]s',自定义配置式路由文件的地址
  • caseSensitive: 仅约定式路由,类型 boolean,默认值 false, 根据文件名转换为路由时是否大小写敏感
  • ignoreRoutes: 仅约定式路由,类型 string[],默认值 [],忽略指定路由的生成
  • ignorePaths: 仅约定式路由,类型 string[],默认值 ['components'],生成路由时忽略指定目录