在react-router :id中使用百分号（%）

我正在尝试在react-router id 中使用百分号。当使用%在 URI 中被禁止，我必须手动编码我的 URI 才能使用这个百分号。因此，使用 Link 时，我使用encodeURI 函数对 URI 进行编码：

<Link to={`/r/${encodeURI(my_str_with_unencoded_percent_sign)}`} >

在我的页面的源代码中，我可以看到该链接使用%25并不是%.

尽管如此，当单击链接时，我收到错误“URIError：格式错误的 URI 序列”（在我的代码的另一部分中，我有一个<Match pattern="/r/:id" …).

我做错了什么？看来 url 已解码before被传递给react-router的parseParams函数，该函数尝试第二次解码它，这导致了这个错误。

我发现了诸如以下的问题https://github.com/ReactTraining/history/issues/461 https://github.com/ReactTraining/history/issues/461 or https://github.com/ReactTraining/history/issues/461 https://github.com/ReactTraining/history/issues/461，但我没有找到解决这个问题的方法：如何在react-router :id中使用百分号？

这是一个工作修改版本网址参数 https://reacttraining.com/react-router/web/example/url-paramsRecat-Training 提供的示例。

将以下内容复制粘贴到您的 index.js 中并测试它以查看其工作原理。我本来打算为你提供一个 codeandbox，但是他们的内部路由存在问题，即使使用 uri 编码的 % 符号也会导致屏幕变黑...我确实在本地测试了这个，并且效果很好。

import React from "react";
import { render } from "react-dom";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

const ParamsExample = () => (
  <Router>
    <div>
      <h2>Accounts</h2>
      <ul>
        <li><Link to={`/${encodeURI("%netflix")}`}>Netflix</Link></li>
        <li><Link to="/zillow-group">Zillow Group</Link></li>
        <li><Link to="/yahoo">Yahoo</Link></li>
        <li><Link to="/modus-create">Modus Create</Link></li>
      </ul>

      <Route path="/:id" component={Child} />
    </div>
  </Router>
)

const Child = ({ match }) => (
  <div>
    <h3>ID: {match.params.id}</h3>
  </div>
)

render(<ParamsExample />, document.getElementById("react"));