v6路由参数解码错误导致页面异常排查过程
问题背景
最近在将项目从React Router v5升级到v6时，遇到了一个令人头疼的问题：某些特殊字符的路由参数在页面渲染时出现异常。这让我花费了大量时间进行排查。
复现步骤
首先，在v5中这样写路由配置是正常的：
<Route path="/user/:userId" element={<UserPage />} />
然后访问URL：/user/张三，页面正常显示。
升级到v6后，同样的代码在某些浏览器中出现异常。特别是当路径包含中文、特殊符号时，如：
/user/张三&李四/user/abc%20def
排查过程
通过调试发现，v6中useParams()返回的参数存在解码问题。在v5中，decodeURIComponent会自动处理，但v6版本中这个行为发生了变化。
具体代码：
const params = useParams();
console.log(params.userId); // 可能出现乱码或解析错误
解决方案
- 手动解码参数：
const params = useParams();
const decodedUserId = decodeURIComponent(params.userId || '');
- 使用自定义Hook统一处理：
function useDecodedParams() {
const params = useParams();
return Object.fromEntries(
Object.entries(params).map(([key, value]) => [
key,
decodeURIComponent(value || '')
])
);
}
- 或者在路由配置中统一处理：
<Route path="/user/:userId" element={<UserPage />} />
// 在组件内部使用解码逻辑
总结
这次升级让我深刻认识到，即使是看似简单的参数解析，在不同版本间也可能存在细微差异。建议在升级时特别注意路由参数的兼容性问题。
参考链接
- React Router v6官方文档
- 路由参数处理相关API文档
讨论