javascript - React Native - get url search params - Stack Overflow

admin管理员组

文章数量:1287489

I am trying to get URL params in a React Native app.

What I tried to do:

1. fails because searchParams is an empty list

const parsedUrl = new URL(url)

// here the searchParams are empty list
console.log(parsedUrl.searchParams)

2. fails because the following error is shown:

[Error: not implemented]

const parsedUrl = new URLSearchParams(url)
console.log(parsedUrl.get(param))

I am trying to get URL params in a React Native app.

What I tried to do:

1. fails because searchParams is an empty list

const parsedUrl = new URL(url)

// here the searchParams are empty list
console.log(parsedUrl.searchParams)

2. fails because the following error is shown:

[Error: not implemented]

const parsedUrl = new URLSearchParams(url)
console.log(parsedUrl.get(param))

• javascript
• react-native

Share Improve this question Follow edited Aug 16, 2021 at 15:22 MaartenDev 5,81155 gold badges2222 silver badges3535 bronze badges asked Aug 16, 2021 at 15:18 spatakspatak 1,38944 gold badges1818 silver badges3232 bronze badges 3

• Could you provide an example url that contains values you want to acess? – MaartenDev Commented Aug 16, 2021 at 15:22
• myapp://?code=123123-1123123-418c-33213-123123 – spatak Commented Aug 16, 2021 at 15:47
• You should look into deep linking: reactnavigation/docs/deep-linking that is the way urls work on mobile devices and apps – MaartenDev Commented Aug 16, 2021 at 18:20

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

You Can Try this:

( Only For React Js )

function getURLParams(parameterName, url) {
  let name = parameterName.replace(/[\[\]]/g, '\\$&');
  let regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'), results = regex.exec(url);
  if (!results) return null;
  if (!results[2]) return null;
  return decodeURIComponent(results[2].replace(/\+/g, ' '));
}

// For Current Window URL
console.log(getURLParams("param1", window.location.href));

// For Custom URL
console.log(getURLParams("param1", "https://example./index.html?param1=Hello"));

Or This

( For React Native )

var url = "http://example.?param1=test&param2=someData&number=123"

var regex = /[?&]([^=#]+)=([^&#]*)/g,
  params = {},
  match;
while (match = regex.exec(url)) {
  params[match[1]] = match[2];
}

console.log(params)

const getSearchParamFromURL = (url, param) => {
  const include = url.includes(param)

  if (!include) return null

  const params = url.split(/([&,?,=])/)
  const index = params.indexOf(param)
  const value = params[index + 2]
  return value
}

const _url = 'myapp://?code=123123-1123123-418c-33213-123123&param_key=param_value'

getSearchParamFromURL(_url, 'code') // output: 123123-1123123-418c-33213-123123

This is how I do in my custom Link.tsx ponent in react-navigation 5:

export const Link = function Link({ to, action, target, onPress, children, params }: Props) {
  const searchParams = new URLSearchParams(params as Record<string, string>)

  return (
    <DefaultLink
      to={`${to.startsWith('/') ? to : `/${to}`}${params ? `?${searchParams.toString()}` : ''}`}
      action={action}
      target={target}
      onPress={onPress}>
      {children}
    </DefaultLink>
  )
}

If you are also using react-navigation, you can use pathConfig.parse and pathConfig.stringify to automatically convert the typing. getStateFromPath|getPathFromState

本文标签： javascriptReact Nativeget url search paramsStack Overflow