iframe内路由变化无法被父页面感知，因其拥有独立window对象、历史栈和URL，useLocation等Hook仅作用于当前执行环境；推荐用postMessage实现父子通信同步状态，或通过URL参数驱动iframe初始路由。

在弹窗中嵌入 iframe 时，主窗口的路由监听（如 useLocation）不会自动响应 iframe 内部的 URL 变化，因为 iframe 是独立的浏览上下文，其路由状态与父页面完全隔离。要实现跨窗口（含 iframe）的路由同步，关键不是“监听 iframe 的路由”，而是建立父子窗口间的主动通信机制，并统一状态源。

为什么 iframe 内的路由变化无法被父页面感知

iframe 拥有独立的 window 对象、历史栈和 URL，React Router 的 useLocation 等 Hook 只作用于当前执行环境（即父页面或 iframe 自身），不会跨边界触发。即使 iframe 加载的是同源前端应用，它的路由更新也仅触发自身组件重渲染，对父窗口无影响。

推荐方案：postMessage + 父子状态桥接

适用于同源 iframe（必须满足同协议、同域名、同端口），安全、兼容性好、无需额外依赖：

在SEO发布前，从路由清单生成XML网站地图和robots.txt

当代理已经知道网站路由或内容URL，并且在启动前需要有效的sitemap XML、sitemap索引或robots.txt引用时，请使用sitemap。这是一个发布构件技能，而不是爬虫或SEO平台。

下载

• iframe 内应用在路由变化时，通过 window.parent.postMessage() 主动通知父窗口新路径、参数等信息
• 父窗口监听 message 事件，收到后更新本地状态（如用 useState 或全局 store 存储当前“逻辑路由”）
• 父窗口可将该状态作为 prop 透传给其他组件，或用于控制弹窗行为（如关闭、刷新、高亮）
• 若需反向控制 iframe 路由（如父页点击跳转到 iframe 内某页），父窗口调用 iframe.contentWindow.postMessage()，iframe 内监听并调用 useNavigate

替代方案：URL 参数驱动 iframe 加载

避免实时同步复杂度，改用“声明式”路由联动：

• 父页面将目标路径作为 query 参数传给 iframe src，例如：<iframe src="https://app.example.com/?route=/settings/profile">
• iframe 内应用启动时解析 location.search，用 useNavigate 导航至对应路由
• 后续 iframe 内部跳转仍由自身 Router 管理，但初始状态与父页保持一致
• 适合对实时性要求不高、且 iframe 内容相对固定的场景

不建议直接使用的方案

Broadcast Channel：仅适用于同源多标签页/窗口，iframe 不属于“窗口”范畴，无法加入同一频道。
localStorage + storage 事件：iframe 可写 localStorage，但父页监听到事件后无法获知是哪个 iframe 发出的，缺乏上下文，易冲突。
SharedWorker：架构复杂，iframe 与父页需共用同一 Worker 实例，实际部署和调试成本高，收益有限。