React Router 嵌套路由：一个 Outlet 引发的布局思考

目录

• 意料之外的标题
• 主要概念这方面，嵌套路由的心智模型
• 说到图解，URL 到组件的映射过程
• 逐层拆解的观点是。从路由配置到页面渲染
• 再看布局决策，什么放父路由，什么放子路由
• 配套能力的观点是，让路由"活"起来
• 记住一个原则

意料之外的标题

你在做一个电商后台。产品模块有两个页面：产品详情 和 新增产品。你自然地写了这样的路由：

}>
} />
} />

Products 组件里放了个

const Products = => (
<>

)

看起来没毛病。结果一跑——

• /products/ 显示：产品列表 + 产品详情 ✅
• /products/new 显示：产品列表 + 新增产品 ❌

新增产品页也顶着“产品列表”四个大字。你只想在 NewProduct 里加个表单，怎么多了个标题？其实，

说到主要概念，嵌套路由的心智模型

先看一个生活中完全一样的场景：

• 展厅 /products
• 电子屏 /products/*
• 招牌 "产品列表"

A visitor looking at “产品 A 详情” → electronic screen shows product A info。sign stays. A visitor coming to “新增产品” → screen shows form,sign still stays – because it belongs to hall,not screen.

If sign actually belongs to a specific exhibition，它就不该挂在父路由里。

说到图解。URL 到组件的映射过程

/products/ 的匹配流程：

graph TD
A --> B
B --> C
C --> D
D --> E
E --> F
F --> G
G --> H
mermaid
graph TD
A --> B
B --> C
C --> D
D --> E
E --> F
F --> G
G --> H
两张图对比，问题一目了然：**父路由的 `

` 对所有子路由“一视同仁”，它并不知道哪个孩子需要它、哪个不需要。**

从逐层拆解来看，从路由配置到页面渲染

再看第一层。路由配置

// App.jsx — 路由像一棵树


} />
} />
} />
{/* 🔑 嵌套路由 */}
}>
} />
} />
} />




*注意* 子路由使用相对方法

)，因为它们写在父 `` 内部，React Router 会自动拼接完整方法。

从第二层来看，父组件——纯粹的占位符或公共 UI 

*极简写法。只做容器*：

// pages/products/index.jsx
import { Outlet } from 'react-router-dom'
const Products = => <>;export default Products;

*如果整个模块需要侧边栏*，可以这样提高：

const Products = => (

          // 所有子页面都有


);
export default Products;


Criterium: "把这段 UI 放在这里后/products/new 页面上是否合理？" - 不合理则下移。
其实，

从第三层来看。子组件——真正负责内容展示 

// pages/products/Detail/index.jsx — 产品详情页需要标题
import { useParams } from 'react-router-dom';const ProductDetail = => {
const { productId } = useParams;return (
<>

产品详情-{productId}
);}，export default ProductDetail;// pages/products/New/index.jsx — 新增页不需要标题
const NewProduct = =>;export default NewProduct;

再看布局决策。什么放父路由，什么放子路线?


...


场景 ✅/❌ 
放父路由 
放子路口 



导航栏/面包屑 
✅ 所有子页面都需要 
❌ 单独页面自行实现 

统一页面标题 
✅ 所有页面同一标题时 
✅ 标题因页面而异时 

表单内容 t d colspan='0'>❌ 与父路口无关 t d colspan='0'>
...


场景 
放父路口 
放子路线 



导航栏/面包屑 
✅ 所有子页面都需要 
❌ 单独实现 

统一标题 
✅ 所有页面同一标题时 
✅ 标题因页面而异时 

侧边栏 
✅ 整个模块统一 
❌ 不同页面不同侧边栏 t d>






Cores Principle:



"Parent routes hold framework/layouts."

"Child routes hold actual page content."

If you’re unsure wher a piece of UI belongs in a parent—put it in a child first. When you see duplication。lift it up.






配套能力

方法懒加载

tsx
// App.jsx
import { lazy,Suspense } from 'react';按理说，import { Routes。Route } from 'react-router-dom';

const Home = lazy => import);const ProductDetail = lazy => import);

function App {
return (
<>
{/* Suspense 包裹所有 Route /}
)}>
{/ …your Routes，/}
{/ 示例 /}
}/>
}/>
{/ …more Routes，/}
{/ 必须放在 Routes 外部，否则不会生效 /}
{/ 注意 ⚡️lazy 会让每个页面按需下载 */}
)}



Now rewrite final answer accordingly.