迁移至React Router Dom v6后Link组件回退功能异常求助
React Router v5迁移至v6后Link组件历史栈异常问题
我刚把应用从React Router Dom v5迁移到v6,遇到一个问题:应用设计为用户在项目/子项目间切换时保持URL(如example.com/projects)不变,仅通过更新state切换内容。在v5中,Link组件可以完美处理这个场景,包括正确响应浏览器回退按钮;但在v6中,若用户从/home进入projectA再切换到projectB,点击回退按钮会直接回到/home而非projectA,导致功能受损。测试发现useNavigate()表现接近预期,但我更倾向于使用Link组件。
相关代码示例
const state = { project: model.id }; <Link to={pathname} state={state}> {children} </Link>
测试环境说明
- 测试沙箱1:React 16 + Router 5.2,使用Links组件,表现正常
- 测试沙箱2:React 18 + Router 6.22.3,使用Links组件,存在回退异常问题
- 测试沙箱3:React 18 + Router 6.22.3,使用useNavigate(),表现接近预期
恳请排查是使用错误还是组件Bug。
内容的提问来源于stack exchange,提问作者axzr
相关产品推荐
相关产品推荐

