在 react-router 中使用百分比（ % ）登录：id

Posted 2023-02-21

【中文标题】在 react-router 中使用百分比（ % ）登录：id

【英文标题】：Using percent ( % ) sign in react-router :id

【发布时间】：2018-05-20 14:42:39

【问题描述】：

我正在尝试在 react-router id 中使用百分号。由于禁止在 URI 中使用 %，因此我必须手动对我的 URI 进行编码才能使用此百分号。因此，使用链接，我使用 encodeURI 函数对 URI 进行编码：

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

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

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

我做错了什么？似乎 url 在 被传递给 react-router 的 parseParams 函数之前被解码，该函数尝试再次对其进行解码，从而导致此错误。

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

【参考方案1】：

这是 Recat-Training 提供的 URL Parameters 示例的工作修改版本。

将以下内容复制粘贴到您的 index.js 中并测试它是否有效。我打算为你提供一个代码框，但他们的内部路由存在问题，即使使用 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"));

【讨论】：

嗨。谢谢您的回答。实际上，当我单击页面上显示的链接时，您的解决方案有效，但在刷新页面时它不起作用：如果我单击“Netflix”链接，它会按预期正确显示 ID，并更改 URL在我的网络导航器中转到“domain.tld/%netflix”。使用 F5 或 ctrl+R 刷新时，我仍然收到相同的错误。这是预期的吗？测试代码在这里（这里只是为了方便 zip 下载，正如你所说，codesandbox 已损坏并显示网页）：codesandbox.io/s/zj7ok3l5x

您在尝试直接导航到包含% 的网址或包含编码的% 的网址时收到malformed url 错误？

好吧，url 包含一个 %（未编码，在 url 栏中），而当我使用 encodeURI 函数时，它应该包含一个编码的 %。不过，react-router 理解编码，因为单击链接会重定向到正确的路由。

但链接会将您定向到编码版本。 to=/$encodeURI("%netflix").如果您希望人们能够直接链接到网址中的%，我会在我的应用程序中的任何路由之前查看window.location.pathname。如果存在任何需要编码的字符，请重定向到 url 的编码版本。

该链接应该将我定向到编码版本，但事实并非如此：如果我查看导航器中显示的 url，则该 url 未编码（使用上面的 codesandbox.io）。我制作了一个视频来向您展示这个问题：ptpb.pw/UBJc.mkv