3.9 KiB

Raw Blame History

name	description
jjb-dynamic-route	定义 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 只做出口，原样渲染子路由：

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）：

import React from 'react';

export default function InspectionRecord(props) {
  return props.children;
}

动态路由子页（InspectionRecord/_id/index.js）：

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（纯出口或布局内嵌套均可）？

3.9 KiB Raw Blame History Unescape Escape