时间戳

首页 > 解决方案 > 在 URL 中使用 % 进行反应解码会导致错误

reactjs - 在 URL 中使用 % 进行反应解码会导致错误

问题描述

为了允许 URL 参数有百分号，我使用以下代码：

<Link to={"project/" + encodeURIComponent(projectName.replace("%", "%25"))}>{projectName}</Link>

上面的链接将我带到该projects页面。这就是我在projects页面上解码 projectName 参数的方式：

const projectName = decodeURIComponent(match.params.projectName);

此代码有效。但是，如果我刷新projects页面或使用浏览器后退/前进按钮导航到projects页面，解码时会出错。URIError: URI malformed

看起来 match.params.projectName 在使用前进/后退按钮刷新/导航后已经解码。这会导致错误发生。

标签： reactjsreact-router

解决方案

该问题是由 React Router 解码 URI 的方式引起的。特别是它处理 % 字符的方式。

我通过用一些随机文本替换URI 参数中的每个%来解决这个问题。永远不会出现在您的程序中的东西。即... 123PERCENTREPLACEMENT123。

它基本上是百分号的手动编码，我必须在另一端通过用 % 符号替换相同的唯一字符串来解码。

推荐阅读