如何在 React JS 中读取组件内的 URL 参数？ [复制]

Posted 2023-02-21

【中文标题】如何在 React JS 中读取组件内的 URL 参数？ [复制]

【英文标题】：How to read URL Parameters within Component in React JS? [duplicate]

【发布时间】：2019-09-30 09:19:29

【问题描述】：

这听起来可能是转储，但我应该如何读取 URL 并从 React JS 中的 URL 获取其值。 我被告知使用 QueryString 来处理 GET 参数。

Url 看起来有以下结构：

localhost/test?id=xxx&value=yyyy

在组件类中我使用以下代码：

class test extends Component 

  func() 
    const params = queryString.parse(location.search);

     //here I get: ?id=xxx&value=yyyy
  

问号标志怎么也被检索了？ 以及如何解决它，以便我能够在不制作太多的情况下获得这些值？

【问题讨论】：

@Ashish，问题是一样的，但答案并不完全符合我的要求。当有一些 npm 库可以更好地处理它时，我不想使用 window.location.search -

只是为了获取参数，我不认为使用任何库是个好主意。当你可以用你自己的一个小 util 函数来实现这一点时。我更喜欢那个。

【参考方案1】：

你可以使用URLSearchParams:

const windowUrl = window.location.search;
const params = new URLSearchParams(windowUrl);
// params['id']

或者，如果您想使用react-router 解决方案，您可以查看this answer。

【讨论】：

react-router 是我想要的方法。现在我只想阅读 GET 参数。

【参考方案2】：

如果您使用react-router，这很容易。看到这个：https://tylermcginnis.com/react-router-query-strings/

【讨论】：

我是否必须使用 react-router，即使我只想检索 url 而不做任何其他事情？出于某种原因，访问 params.id 会导致 undefined..

如果你不想使用react-router，你可以试试这个库：npmjs.com/package/query-string

我已经在使用它了.. 但问题是：如何从中获取单个值？

如果你使用query-string pacakge，它有一个.parse() 函数从URL 的查询字符串创建一个对象。所以，假设网址是?search=something?dog=cat。调用parse 方法后，您将拥有一个类似于以下 search: 'something', dog: 'cat' 的对象，您可以从需要它们的位置访问各个属性

出于某种原因，我使用的是查询字符串而不是查询字符串包。不确定是否有任何显着差异。现在，我将删除前一个并为此安装查询字符串......这可能是 ignoreQueryPrefix: true 参数按预期工作的原因。