如何解析 url 查询字符串中完整的 link？

Question

URL: https://n9hon.csb.app?name=netflix&url=https://localhost?apikey=123&code=321

代码：

import { useLocation } from "react-router-dom";

function useQuery() {
  const {search} = useLocation();
  const query = new URLSearchParams(search);
  console.log('name: ', query.get('name'))
  console.log('url: ', query.get('url'))
  return query
}

输出：

name:  netflix 
url:  https://localhost?apikey=123

如您所见，code参数丢失了。我希望 url 参数的值应该是 https://localhost?apikey=123&code=321.

包版本：

"react-router-dom": "5.2.0"

Answer 1

发生这种情况是因为您没有对 URI 组件进行编码。您可以使用 encodeURIComponent 和 decodeURIComponent 函数来解决您的问题。在推送到路由之前编码 URL 并且在接收之后你可以解码它。

注意：请考虑不需要解码，因为new URLSearchParams(search).get('key')命令会自动解码组件。

// In navigating component

const history = useHistory();

return (
    ...
    <button onClick={() => history.push(`/?name=netflix&url=${encodeURIComponent('https://localhost?apikey=123&code=321')}`)}>
        Go to link
    </button>
    ...
)

import { useLocation } from "react-router-dom";

function useQuery() {
  const {search} = useLocation();
  const query = new URLSearchParams(search);
  console.log('name: ', query.get('name'))    // name: netflix 
  console.log('url: ', query.get('url'))      // url: https://localhost?apikey=123&code=321 
  return query;
}

Answer 2

您的代码是正确的，但是您输入的 URL 是错误的。

如果您使用：

https://n9hon.csb.app?name=netflix&url=https://localhost?apikey=123&code=321

您的浏览器会将其读取为

Protocoll
https:
                Top Level Domain
                 .app
             Domain
              csb
      Sub-Domain
        n9hon
                         Params
                     ?name=netflix&url=https://localhost?apikey=123&code=321

到目前为止一切还好，但后来一切都付之东流了：

                        Param 1
                      name=netflix
                                          Param 2
                                   url=https://localhost?apikey=123
                                                                     Param 3
                                                                    code=321

如果你想让 Param2 和 Param 3 作为一个 Param 读取，你需要去掉 &（并且还要清除 ?:= 和 /）

https://n9hon.csb.app?name=netflix&url=https%3A%2F%2Flocalhost%3Fapikey%3D123%26amp%3Bcode%3D321

在您的代码中，您可以通过 encodeURI(uri) and revert it via decodeURI(enc)

轻松完成此操作

如何解析 url 查询字符串中完整的 link？

How to parse the complete link in the url query string?

javascript

react-router

react-router-dom

react-hooks

urlsearchparams