展开本页目录
开始前准备什么
- 本地练习资料可免费编辑与检查；执行Stitch需要可访问账号和已配置的官方MCP或SDK，云端额度/计划以账户页面为准。
- 在隔离练习项目操作，保留projectId、screenId和版本；本稿未调用目标云端，不能据此声称生成完成。
- 读取实际导出页面
- 找出占位链接
- 建立真实路由
- 替换导航组件
- 补桌面回家入口
- 测试双端来回
- 交付导航矩阵
1. 读取实际导出页面
按官方react-components流程取得每屏HTML与图像，记录路由映射。
本地练习HTML若是作者材料，应标明不是官方实际导出。
2. 找出占位链接
列出Logo、底栏、侧栏中的href="#"，对应首页、清单和设置。
纯按钮操作不强改成导航链接，先判断动作语义。
3. 建立真实路由
在React应用配置三条路径并给出可辨认页面标题。
不存在的路径先补页面或明确禁用，不随意指向首页糊弄。
官方界面与功能位置
以下为官方文档配图，具体版本与账号入口以当前产品为准。本课练习输入与验收对照见相邻步骤。
4. 替换导航组件
依当前React Router用Link连接真实route，并用location设活动态。
不要留下点击只滚到顶部的井号链接。
5. 补桌面回家入口
让TopAppBar的Logo或标题指向/。
官方指出移动底栏常用md:hidden，桌面不能依赖它返回。
6. 测试双端来回
在窄屏用底栏切换，在宽屏用侧栏和Logo回首页。
逐项检查活动态，避免正确导航但高亮仍停留旧页。
7. 交付导航矩阵
保存链接表、路由源码和双端实际截图。
编译成功与链接真正到达目标页分别记录。
下载本课材料并开始操作
练习包包含本课的具体输入、可编辑数据、正反样例与七步说明。index.html 可离线查看原件和验收参考，actual-results.csv 用于记录你实际操作后的结果。
怎样确认已经完成
- 导出占位导航均有明确处置。
- 宽屏Logo能回/。
- 窄屏/宽屏活动态与当前路由一致。
常见问题
Stitch导出的按钮能点，为什么只是跳到顶部？
先列出导出页面的 Logo、底栏、侧栏占位 href，再映射到三个真实路由。实现后在手机与桌面逐项点击并刷新深层路径；不能因桌面隐藏底栏就失去回首页入口。
手机有底栏，桌面为什么回不去首页？
底栏可能在桌面被md:hidden隐藏。本课为顶部Logo提供独立回首页链接，不把移动专用导航当所有设备的唯一出口。