用途:在添加或审查前端导航时,确保内部路由保留 SPA 行为,同时支持 Cmd/Ctrl-click、中键新标签等浏览器语义。
主要能力与规则:纯导航必须渲染真实的 React Router <Link>(同一 SPA 路由)、原生 <a href>(外部/公共、认证登录或明确新标签目的),或使用 shadcn Button asChild 包装其中之一。不要使用仅负责调用 navigate()、window.open() 或 window.location 的按钮。原因:浏览器修饰键点击、中键、键盘激活、可访问性与客户端路由都依赖真实链接;命令式 JavaScript 导航会隐藏目标并阻断这些浏览器语义。
使用方式:从 react-router 导入 Link;同一 SPA 内部路由用 Link;URL 为外部、跨应用/公共边界、认证或登录、或有意新标签时用 <a>;在 to 或 href 中保留查询字符串与哈希;带嵌套操作的卡片仅链接非交互区域或使用透明 Link 覆盖层,绝不嵌套链接或按钮;若选择模式改变点击行为,只对未修改的主键点击 preventDefault,并保留修饰键点击;变更后的重定向、OAuth 与弹窗流程、下载、媒体/blob URL、播放、键盘快捷键与有状态标签页继续使用命令式导航。
审查方式:搜索 onClick={() => navigate、window.open、window.location、onAuxClick 以及仅用于路由的按钮,逐个确认是纯导航还是有状态工作流;验证渲染 DOM 暴露 href,并测试普通点击、Cmd/Ctrl-click、中键、键盘 Enter 及适用的嵌套控件;对改动包运行 oxfmt 和针对性测试或类型检查。
相关技能:client-side-routing、frontend-design、shadcn-ui。
限制:本资料未提供收费、平台或效果信息。