React Router中fetcher路径未规范化导致重复请求的问题分析

问题背景

在React Router的最新版本中，开发者发现了一个与路径规范化相关的性能问题。当使用fetcher.load()方法加载带有查询参数的路径时，系统会错误地将完整URL(包含查询字符串)发送到manifest检查，导致即使路径相同但查询参数不同时也会触发重复的manifest请求。

技术细节

React Router内部在处理导航和fetcher请求时采用了不同的路径处理逻辑：

1. 对于常规导航，router会使用location.pathname进行路由匹配
2. 但对于fetcher请求，系统直接使用了原始路径而没有先进行规范化处理

这种不一致性导致了manifest检查的失效。具体来说，问题出在router.ts文件中的路径处理逻辑，它没有对fetcher传递的路径进行与导航相同的规范化处理。

影响范围

这个问题主要影响以下场景：

• 使用fetcher.load()加载带有查询参数的路径
• 应用中实现了基于查询参数的动态内容加载(如搜索框、筛选器等)
• 使用React Router的懒加载路由功能

在典型场景中，比如一个搜索输入框，用户每输入一个字符都会触发新的manifest请求，尽管实际路由路径并没有变化。

解决方案

React Router团队已经修复了这个问题，修复方案包括：

1. 统一fetcher和导航的路径处理逻辑
2. 在检查manifest前对路径进行规范化处理
3. 移除查询字符串对路由匹配的影响

这个修复将被包含在下一个版本更新中，对于使用Remix 2.15.2的项目，团队也考虑将其向后移植到2.15.3版本。

最佳实践

为了避免类似问题，开发者应该：

1. 注意路径规范化的一致性
2. 避免在路由匹配关键逻辑中使用查询参数
3. 对于频繁变化的查询参数场景，考虑使用状态管理而非路由参数
4. 定期更新React Router到最新版本以获取性能改进和错误修复

这个问题提醒我们，在路由处理中保持路径处理的统一性对于应用性能至关重要，特别是在高频交互的场景下。