From 3d8642b7e6cf5f670c2b2f824b35176c99e898d0 Mon Sep 17 00:00:00 2001 From: wonder Date: Sat, 25 Apr 2026 22:15:39 +0800 Subject: [PATCH] vault backup: 2026-04-25 22:15:39 --- 金山办公作业/Week06/Outlet.md | 135 +++++++++++ 金山办公作业/Week06/前端项目依赖清单.md | 203 +++++++++++++++++ 金山办公作业/Week06/统一封装请求.md | 209 ++++++++++++++++++ 金山办公作业/Week06/路由原理.md | 113 ++++++++++ .../Week06/{题目.md => 题目-在线管理平台.md} | 5 + 金山办公作业/Week06/验收任务清单.md | 2 +- 6 files changed, 666 insertions(+), 1 deletion(-) create mode 100644 金山办公作业/Week06/Outlet.md create mode 100644 金山办公作业/Week06/前端项目依赖清单.md create mode 100644 金山办公作业/Week06/统一封装请求.md create mode 100644 金山办公作业/Week06/路由原理.md rename 金山办公作业/Week06/{题目.md => 题目-在线管理平台.md} (98%) diff --git a/金山办公作业/Week06/Outlet.md b/金山办公作业/Week06/Outlet.md new file mode 100644 index 0000000..20cd0af --- /dev/null +++ b/金山办公作业/Week06/Outlet.md @@ -0,0 +1,135 @@ +--- +tags: [frontend, react, react-router, routing, nested-routes] +create time: 2026-04-25 15:30 +--- + +# Outlet:嵌套路由的出口 / 占位符 + +## 概述 + +`Outlet` 是 React Router 中用于"嵌套路由占位"的组件,负责在父组件布局中预留一个位置,由子路由匹配到的组件来渲染。 + +## 正文 + +### 为什么要用 Outlet + +假设有这样的路由结构: + +- `/dashboard` +- `/courses` +- `/students` + +它们都共享同一个外层布局——左侧导航栏、顶部标题栏、主内容区域。如果不使用 `Outlet`,每个页面组件都要重复写一遍布局结构。 + +有了 `Outlet`,可以把公共布局抽到一个**父路由组件**中,子页面内容自动渲染到 `Outlet` 位置,不需要重复代码。 + +> 💡 **想一想**:如果每个子页面都自己写侧边栏和顶栏,当侧边栏需要修改时,需要改几个文件?用了 `Outlet` 后又需要改几个? + +### 路由结构对比 + +```mermaid +graph TB + subgraph "不使用 Outlet" + A1[LoginPage] --> B1[浏览器] + A2[DashboardPage] --> B1 + A3[CoursesPage] --> B1 + A4[StudentsPage] --> B1 + end + + subgraph "使用 Outlet" + Layout[Layout 父组件
header + aside + Outlet] --> B2[浏览器] + subgraph "Layout 内部" + H[
] + S[