刷新后点击导航跳转时React Router出现路由回弹卡住故障

AI 小北

2026-9-26

这是React路由项目中较为常见的问题，并非独有bug，你可以按照以下方向排查：

1. 路由权限守卫逻辑异常

Crema模板默认内置了路由权限校验逻辑，刷新页面后用户身份、权限状态如果是异步初始化的，可能出现页面刚加载时权限还未拉取完成，路由守卫判定当前跳转的路由无权限，触发回弹回之前页面的问题。你可以在权限判断的逻辑处加日志，验证刷新后第一次点击跳转时，路由对应的auth字段是否被正确识别。

2. 路由重复注册/匹配顺序错误

检查所有路由配置中是否存在重复的path，或者通配符路由被插到了业务路由的前面，导致跳转时优先匹配到通配符规则直接触发重定向。你可以打印最终生成的routes数组，检查路由的顺序和完整性是否符合预期。

3. 路由切换动画组件逻辑异常

你代码中用到的自定义TransitionWrapper组件如果做了路由栈缓存或者历史状态管理，刷新后组件内部存储的历史状态和实际浏览器history对象不同步，就会出现跳转后回弹的问题。你可以先暂时去掉TransitionWrapper，直接渲染renderRoutes(routes)，如果问题不再复现，即可定位是该动画组件的逻辑问题。

4. 路由依赖版本不兼容

如果你们升级过react-router、react-router-config的版本，Crema模板内置的createRoutes、路由渲染逻辑可能和新版本API不兼容，导致history对象状态不同步。可以检查package.json里的react-router相关依赖版本是否和Crema模板推荐的版本一致。