98 lines
3.9 KiB
Markdown
98 lines
3.9 KiB
Markdown
|
---
|
|||
|
|
name: jjb-dynamic-route
|
|||
|
|
description: 定义 JJB 项目动态路由规范。在创建详情页、编辑页或使用 _id 后缀、获取 props.match.params、嵌套路由父级 index 与 props.children 出口时使用。
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# 项目页面结构
|
|||
|
|
|
|||
|
|
## 动态路由规范
|
|||
|
|
|
|||
|
|
- **ID 动态路由**：当页面需要支持动态路由参数（如详情页、编辑页）时，文件夹命名使用 `_id` 后缀
|
|||
|
|
|
|||
|
|
- 示例：`_id`、`_type`
|
|||
|
|
|
|||
|
|
- 说明：系统会自动将 `_id` 识别为动态路由参数，并在路由中注入对应的 `id` 值
|
|||
|
|
|
|||
|
|
- **目录结构示例**：
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
List/
|
|||
|
|
├── index.js # 列表页（或见下文「嵌套路由父级」纯出口）
|
|||
|
|
└── _id/
|
|||
|
|
└── index.js # 动态路由详情页
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 嵌套路由父级 `index.js`（必须）
|
|||
|
|
|
|||
|
|
`@cqsjjb/jjb-dva-runtime` 自动化路由会把**子路由**渲染成父级组件的 **`props.children`**。因此：
|
|||
|
|
|
|||
|
|
- 只要某目录下存在**子路由目录**（如 `_id`、`_type` 或其它页面子文件夹），**该父级目录必须提供 `index.js`**。
|
|||
|
|
- **禁止**仅保留 `Parent/_id/index.js` 而省略 `Parent/index.js`，否则路由树中间节点无法正确挂载，子页面可能白屏或命中 404。
|
|||
|
|
|
|||
|
|
### 父级仅有子路由、无独立页面 UI
|
|||
|
|
|
|||
|
|
典型场景：业务上只有「带子路径的详情/子页」（例如仅有 `InspectionRecordHazardList/_id` 对应 `/inspectionRecordHazardList/:id`），父级不参与具体布局。
|
|||
|
|
|
|||
|
|
父级 `Parent/index.js` **只做出口**，原样渲染子路由：
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
import React from 'react';
|
|||
|
|
|
|||
|
|
export default function ParentRouteOutlet(props) {
|
|||
|
|
return props.children;
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 父级带 `_id` 时：与 `jjb-dva-runtime` 嵌套路由一致
|
|||
|
|
|
|||
|
|
自动化路由将子路由树作为父组件的 **`props.children`** 挂载（见 `@cqsjjb/jjb-dva-runtime/automatic/router.js` 内层 `Switch`）。**父级 `index.js` 必须渲染 `props.children`**，否则子页无法挂载。
|
|||
|
|
|
|||
|
|
- **禁止在父级用「无子路由时渲染列表」兜底**：在同一路由父级里写 `props.children ? children : <列表 />` 会与嵌套 `Switch` 的命中逻辑冲突，易出现 **「抱歉，您访问的应用页面不存在」** 等 404，或路径被错误截断。**列表页应放在同级独立目录**，与「仅带子路由的父级」拆成两个路由。
|
|||
|
|
|
|||
|
|
**推荐目录示例**（列表 + 同前缀下钻）：
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
InspectionRecordList/
|
|||
|
|
└── index.js # /inspectionRecordList 检查记录列表
|
|||
|
|
InspectionRecord/
|
|||
|
|
├── index.js # 仅 return props.children
|
|||
|
|
└── _id/
|
|||
|
|
└── index.js # /inspectionRecord/:id 下钻页
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
菜单入口指向 **`/inspectionRecordList`**；列表内跳转使用 **`history.push(\`/inspectionRecord/${id}\`)`**（路径首段与目录 PascalCase 对应，运行时首字母小写）。
|
|||
|
|
|
|||
|
|
- **同屏「主从」布局**（列表与详情同页、需长期并排展示 `children`）：在**单页组件**内用局部 `children` 槽位即可，但不要与「文件树父子路由」混用兜底；若实现成本过高，优先采用上文「列表独立路由」方案。
|
|||
|
|
|
|||
|
|
- **代码示例**：
|
|||
|
|
|
|||
|
|
**父级出口**（`InspectionRecord/index.js`）：
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
import React from 'react';
|
|||
|
|
|
|||
|
|
export default function InspectionRecord(props) {
|
|||
|
|
return props.children;
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**动态路由子页**（`InspectionRecord/_id/index.js`）：
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
import React from 'react';
|
|||
|
|
|
|||
|
|
const Page = props => {
|
|||
|
|
const { id } = props.match.params;
|
|||
|
|
return <div>{id}</div>;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export default Page;
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**说明**：`props.match.params` 中的 `id` 对应 `_id` 目录。
|
|||
|
|
|
|||
|
|
## 自检清单
|
|||
|
|
|
|||
|
|
- [ ] 已存在 `.../某父级/_id/`（或其它子页面目录）时，是否已添加 **`某父级/index.js`**？
|
|||
|
|
- [ ] 父级 `index.js` 是否在最终 JSX 中渲染了 **`props.children`**（纯出口或布局内嵌套均可）？
|