React Router 7.5.1 版本修复 SPA 预渲染路由重载问题

在 React Router 7.2.0 版本中，开发者们发现了一个关于单页应用(SPA)模式下预渲染路由的导航问题。这个问题主要影响那些使用预渲染技术(prerender)但设置为 serverSideRendering: false 的路由，当这些路由的参数发生变化时，路由组件不会正确地重新加载数据。

问题现象

当开发者配置了一个预渲染路由，例如 /page/:id，并设置了 loader 函数来获取数据时，在 SPA 模式下会出现以下异常行为：

1. 用户首次访问预渲染的路由(如 /page/1)时，页面正常显示
2. 用户通过客户端导航跳转到同一路由但参数不同(如 /page/2)时
3. URL 地址栏会更新，但页面内容不会刷新，仍然显示第一个页面的数据

这个问题在 React Router 7.2.0 版本中首次被发现，影响了使用预渲染功能的 SPA 应用。开发者尝试了多种解决方案，包括使用 key 属性强制重新挂载组件，或者添加 shouldRevalidate 函数强制重新验证，但这些方法要么无效，要么不是理想的解决方案。

技术背景

React Router 的预渲染功能允许开发者在构建时生成静态 HTML，同时保留客户端路由功能。当配置为 serverSideRendering: false 时，应用会以纯 SPA 模式运行，但仍能利用预渲染的 HTML 作为初始内容。

在正常情况下，当路由参数变化时，React Router 应该：

1. 检测到路由参数变化
2. 重新调用 loader 函数获取新数据
3. 使用新数据重新渲染路由组件

但在受影响版本中，这一机制出现了故障，导致参数变化时没有触发数据重新获取和组件更新。

解决方案

React Router 团队在 7.5.1 版本中修复了这个问题。修复的核心是改进了 SPA 模式下预渲染路由的重新验证逻辑。现在，当路由参数变化时，系统会正确地：

1. 识别导航动作
2. 重新执行 loader 函数
3. 使用新数据更新组件

开发者不再需要手动添加 shouldRevalidate 或使用 key 属性强制刷新等变通方案。

最佳实践

对于使用 React Router 预渲染功能的开发者，建议：

1. 确保使用 7.5.1 或更高版本
2. 对于动态路由，仍然建议实现适当的加载状态处理
3. 考虑在复杂场景下实现自定义的缓存策略
4. 区分构建时数据(loader)和运行时数据(clientLoader)的使用场景

这个修复显著提升了 React Router 在 SPA 模式下处理预渲染路由的稳定性和一致性，使开发者能够更可靠地构建混合了静态生成和动态交互的现代 Web 应用。