Question

在工作时遇到了问题，然后遇到了

  Uncaught URIError: This is likely caused by an invalid percent-encoding

目前，我正在使用新闻API，其中一些文章可能包含%。我的整个应用程序都依赖于在URL中显示新闻报道的名称，因为我使用this.props.match.params.id

我尝试在线搜索解决方案，但是对于解决这个确切的问题，大多数都不清楚。

有没有解决此问题的简单方法？

Answer 1

您需要将encodeURIComponent()与作为参数接收的路径一起使用：示例：

const receivedArticleName = encodeURIComponent('Article Name with %');

由于您使用的是API，因此一旦收到API，就将URL变量设置为receiveArticleName即可。

Answer 2

步骤 1 转到 /node_modules/history/esm/history.js:87

第 2 步注释此代码段

try {
location.pathname = decodeURI(location.pathname);
} catch (e) {
if (e instanceof URIError) {
  throw new URIError('Pathname "' + location.pathname + '" could not be 
  decoded. ' + 'This is likely caused by an invalid percent-encoding.');
} else {
  throw e;
}}

第 3 步运行 npm Start

Answer 3

这对我有用。

     function navigate(data: Partial<Saturation>) {
    if (data.name) {
      const checkSyrupForPercentChar = data.name.includes('%')
      const syrupReplacementName = data.name.replace('%', '')

      history.push({
        pathname: `saturation-directory/${data.id}/${urlFormat(
          checkSyrupForPercentChar ? syrupReplacementName : data.name
        )}`,
        state: {
          syrupData: data,
          from: 'syrupDirectory'
        }
      })
    }
  }

重构前的代码：

      function navigate(data: Partial<Saturation>) {
if (data.name) {
  history.push({
    pathname: `saturation-directory/${data.id}/${urlFormat(data.name)}`,
    state: {
      syrupData: data,
      from: 'syrupDirectory'
    }
  })
}

}

要点是我合并的字符串函数以及路径名上的三元运算符。

React => Uncaught URIError：这很可能是由无效的百分比编码引起的。固定

3 个答案: