linking config with react-navigation v5.9 for URL with query params

user_7930910 0
Viewed 706

I'm working with react-navigation and I'm trying to configure my linking element because I need it to use it in apps and web to. It works fine with simple URLs but I don't know how exactly include a URL with query params. My URL is /ecare/page?reference=XXX

and here's my linking

const linking = {
    prefixes: ['//my-prefix'],
    config: {
      screens: {
        Invoices: 'ecare/invoices',
        Products: {
          path: 'ecare/page/:reference',
        }
      }
    },
  }

How can I exactly parser my URL from my query param URL to my linking working fine?

react-navigation react-native linker
2 Answers

A late answer but it might help someone. I've also spent some time on this issue. Here's what I was missing.

Keys in the screens object correspond with the screen name.

So if you have the following screen:

<SomeScreen name={'invoices'} ... />

And you want to navigate to it with the following

const navigationProps = useLinkProps({
    to: {
      screen: 'invoices',
      params: { reference: someValue },
    },
  })

Then you have to specify your screen in the linking config as:

const linking = {
    prefixes: ['//my-prefix'],
    config: {
      screens: {
        ['invoices']: 'invoices/:reference'
      }
    },
  }

Not as Invoices: 'invoices/:reference'

So,

Key == Screen name

Path == any value you want

user_87539920
user_67756340
Related