在 React Router 中编码 uri

enocde uri in React Router

有什么方法可以在 React 路由器中对 <Link>to prop 中的 uri 进行编码。

我的代码:

<Link to={`info/${props.movie.Title}`}> info </Link>

我试过 encodeURI() 但它不起作用。

uri = encodeURI(`info/${props.movie.Title}`)
console.log(uri);
<Link to={uri}> info </Link>

单击 link 将 url 显示为“http://localhost:3000/info/Man of Steel" as opposed to "http://localhost:3000/info/Man%20of%20Steel”。 有没有办法得到后者?

编辑

React 完美运行。我的错。 Firefox 以某种方式不在 URL 栏中编码 spaces。但是其他特殊字符会被编码。所以我的问题变成了为什么 spaces 没有被 Firefox 在 URL 栏中编码。我还注意到复制粘贴 link 给出的是 %20 而不是 space。

编辑 2

Firefox 解码 spaces 并将其显示在 URL 栏中,这与其他显示 %20 的浏览器不同。编码实际上是在后台完成的。

您不必在 URL 地址中使用一些随机字符串。您可以使用电影的 id ( info/:id ) 代替它,然后通过 id 获取电影并显示给用户。结果你不需要解码字符串,因为它不可靠

encodeURIComponent() 和 React 完美运行。问题是最新版本的 Firefox 没有显示编码的 space。它是编码的。复制粘贴它给出 %20。但是在Firefox中会显示为spaceURL栏。其他浏览器仍然给 %20.