通过多轮迭代生成代码的渐进式浓缩摘要，保留核心内容，帮助快速…

# react-router 核心包渐进式摘要（路由匹配逻辑向）

> 说明：我无法实时读取 GitHub 仓库当前代码，以下基于 react-router 公开的稳定架构（v6.x）整理，行数与文件量按你的描述估算。建议以此为阅读地图对照源码。

一、目录结构概览

• index.tsx：对外导出入口，聚合各模块 API
• components.tsx：Routes、Route、useRoutes 等组件层
• hooks.tsx：useMatches、useParams、useLocation 等 Hook
• router.ts：核心 Router 类，createRouter/导航/匹配编排
• utils.ts：matchRoutes、matchPath、路径解析工具

二、路由匹配核心链路（建议按此顺序阅读）

第 1 步：路由配置扁平化

• createRoutesFromChildren：把 <Route> JSX 树转为 route 对象数组
• 每个节点记录 path、element、children、index

第 2 步：构建匹配用的路径分支

• flattenRoutes：将嵌套树“压平”为带 routesMeta 的分支数组
• 关键点：为每个分支计算完整路径和父链索引，供后续还原层级

第 3 步：路径评分

• computeScore：静态段 > 动态段(:id) > 模糊匹配(*)
• rankRoutes 排序后，高分优先匹配——这解释了为何静态路由优先命中

第 4 步：逐分支尝试匹配

• matchRouteBranch：对扁平化分支逐个 matchPath
• compilePath：将 pattern 编译为正则，提取 params
• 命中即返回 RouteMatch[]（含 params、pathname、父级链）

第 5 步：渲染还原

• useRoutes / <Routes>：拿到 matches 后从最深处向上构建 React 元素树（_renderMatches），还原嵌套布局

三、渐进式阅读路径（三轮）

1. 第一轮（10分钟）：只读 matchPath + compilePath，理解“pattern → 正则 → params”

2. 第二轮：读 flattenRoutes + computeScore，理解“嵌套树如何压平并排序”

3. 第三轮：读 router.ts 的 matchRoutes 编排 + _renderMatches，打通“配置 → 匹配 → 渲染”全链路

四、核心心智模型

• 匹配是“打分排序后取最优分支”，不是简单遍历
• params 从叶子向上合并，useParams 拿全量
• 通配符 * 分数最低，永远兜底

需要某一步的伪代码拆解，告诉我即可。