本机React-解析URL以获取查询变量

sdnqo3pr  于 2022-12-19  发布在  React
关注(0)|答案(7)|浏览(163)

正在寻找一种方法来解析URL,以便在React Native中获取从Linking接收的查询变量。
我收到的URL如下所示:
url应用程序方案://某个页面?某个变量=某个值
我想从URL获取someVar值。
有什么想法吗?

laawzig2

laawzig21#

这个应该可以

  1. var url = "http://example.com?myVar=test&otherVariable=someData&number=123"
  2. var regex = /[?&]([^=#]+)=([^&#]*)/g,
  3. params = {},
  4. match;
  5. while (match = regex.exec(url)) {
  6. params[match[1]] = match[2];
  7. }
  8. console.log(params)
mmvthczy

mmvthczy2#

有一个URL class in JavaScript,它可以让你健壮地构建和解析URL,使查询参数更容易访问:

  1. const url = new URL('url-app-scheme://somePage?someVar=someVal');
  2. url.searchParams.get('someVar')

遗憾的是,在React Native中实现的URL并不完整,幸运的是,有一个名为react-native-url-polyfill的可靠polyfill库,它提供了一个行为良好并经过测试的URL实现-我强烈推荐它。

bkkx9g8r

bkkx9g8r3#

使用query-string可以正常工作

  1. yarn add query-string
  2. import queryString from 'query-string';
  3. const parsed = queryString.parseUrl("https://pokeapi.co/api/v2/pokemon?offset=10&limit=10");
  4. console.log(parsed.query.offset) will display 10
k4aesqcs

k4aesqcs4#

您可以从JS生态系统中利用一些方法来实现这一点。

jgzswidk

jgzswidk5#

尝试URL https://www.npmjs.com/package/url
"此模块具有用于URL解析和解析的实用程序,旨在与node.js核心url模块具有相同的功能。"
使用Chrome react原生调试器时,节点URL对象可用于您的应用,但未绑定时,该对象在iPhone上不可用。
所以使用这个软件包

  1. npm install url

样本代码:

  1. import url from 'url';
  2. ...
  3. let urlObject = url.parse(inUrlString);
  4. let outUrlString = urlObject.protocol + '//' + urlObject.host + '/more/jump?jump_path=' + encodeURIComponent(urlObject.pathname);
mlmc2os5

mlmc2os56#

  1. url="example.com/path/?id=1"
  2. let urlObject = url.parse(url, true); // second parameter `true` (parse search query)
  3. console.log(urlObject.query['id']); // 1
vlurs2pr

vlurs2pr7#

更新:这不是上述问题的解决方案,因为它只有在调试模式下才能工作。但是我没有删除这个答案,因为我认为它指出了一个值得注意的细微差别。
React Native(使用版本0.46)支持JavaScript自己的URL Web API,您可以使用to轻松地解析或构建url的任何部分。
这个API与Node.js中URL模块的WHATWG API相同。这个答案应该更明显,但是它很容易因为可用的URL解析包的数量而迷失。
编辑:由于某种原因,它只能在JS调试模式下工作,否则就不行了。因此,这个解决方案实际上并不有效,但我将其留在这里,因为我很想知道如何让相同的URL模块与react-native一起工作。

相关问题