一、约定式路由
约定式路由也叫文件路由,即不需要配置,文件系统即路由。通过目录和文件及其命名分析出路由配置。
1. 文件路由
如果没有 routes 配置,Umi 会进入约定式路由模式。,然后分析 src/page
目录拿到路由配置。
注意:以下规则文件,不会被注册为路由
- 以
.
或_
开头的文件- 以
d.ts
结尾的类型定义文件- 以
test.ts
、spec.ts
、e2e.ts
结尾的测试文件(适用于.js
、.jsx
、.tsx
)components
目录和component
目录utils
和util
目录- 非
.js
、.jsx
、.ts
、.tsx
文件- 文件内容不包含 JSX 元素
2. 动态文件路由
约定 []
包裹的文件或文件夹为动态路由。
3. 全局 layout
约定 src/layouts/index.tsx
为全局路由。返回一个 React 组件,并通过 props.children
渲染子组件。
4. 不同的全局 layout
如果需要针对不同路由输出不同的全局 layout,您可以在 src/layout/index.tsx
中对 location.path
做区分,来渲染不同的 layout。
5. 404 路由
约定 src/pages/404.tsx
为 404 页面,需返回 React 组件。
6. 扩展路由属性
支持在代码层通过导出静态属性的方式扩展路由。
function HomePage() {
return <h1>Hello World!</h1>;
}
HomePage.title = '首ye';
export default HomePage;
其中 title
会附加到路由配置中。