CODEWITHSUNDEEP
react-nativelinkerreact-navigation
Elena Martín Castillo
Elena Martín Castillo

Reputation: 445

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

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?

Upvotes: 3

Views: 1949

Answers (2)

Alex Trofimov
Alex Trofimov

Reputation: 199

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

Upvotes: 1

Dhirendra Pratap
Dhirendra Pratap

Reputation: 548

You can take reference from -> https://reactnavigation.org/docs/configuring-links/#passing-params

Upvotes: -1

Related Questions