使用百分比( % )登录 react-router :id [英] Using percent ( % ) sign in react-router :id

问题描述

我正在尝试在 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 ?

解决方案

这是 URL 参数 Recat-Training 提供的示例.

将以下内容复制粘贴到您的 index.js 中并进行测试以查看它是否有效.我打算为你提供一个代码和盒子，但他们的内部路由存在问题，即使使用 uri 编码的 % 符号也会导致屏幕变黑......我确实在本地测试过，效果很好.

从react"导入React；从react-dom"导入{渲染}；从react-router-dom"导入{ BrowserRouter 作为路由器、路由、链接}；const ParamsExample = () =>(<路由器><div><h2>帐户</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><Route path="/:id" component={Child}/>

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

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

I'm trying to use a percent sign in a react-router id. As using % in URI is forbidden, I have to encode my URI manually to be able to use this percent sign. Using a Link, I therefore use the encodeURI function to encode the URI:

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

In the source code of my page, I can see that the link uses %25 and not %.

Still, when clicking on the link, I get the error "URIError: malformed URI sequence" (in another part of my code, I have a <Match pattern="/r/:id" …).

What did I do wrong? It seems the url is decoded before being passed to the parseParams function of react-router, which tries to decode it a second time, which leads to this error.

I found issues such as https://github.com/ReactTraining/history/issues/461 or https://github.com/ReactTraining/history/issues/461, but I didn't find any solution to this problem: how can I use a percent sign in a react-router :id ?

解决方案

Here is a working modified version of the URL Parameters example provided by Recat-Training.

Copy paste the below into your index.js and test it to see it works. I was going to provide a codesandbox of this for you, but their internal routing has issues that cause the screen to go black even with uri encoded % signs... I did test this locally and works like a charm.

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"));

这篇关于使用百分比( % )登录 react-router :id的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！