React抛出URIError:这很可能是由无效的百分比编码引起的。

Question

在react中工作，然后遇到了这样的问题

  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，一旦收到它，使用该receivedArticleName设置您的URL变量，您就完成了。

Answer 2

这对我起了作用。

     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'
    }
  })
}

}

我合并的字符串函数也是路径名上的三元操作符。