linkTo no longer working in React Navigation 7 - Stack Overflow

admin管理员组

文章数量:1332976

After updating to "@react-navigation/native": "^7.0.3", using linkTo from useLinkTo() isn't working as it used to in ReactNative.

My linking config is somewhat complex:

const config = {
  screens: { // Root navigator: Menu Nav
    StackNav: {
      screens: {
        TabContainer: '/places',
        TabsNav: {
          screens: {
            Screen1: `/summary`,
            Screen2: '/stats',
          },
        },
        Screen3: '/account'
      }
    },
    Screen4: '/chat'
  }
}

...and using useLinkTo() to link to /stats isn't working anymore. It used to work in 6.x. I'm using it from within my own app to navigate when I might not have a It works fine so far for StackNav and ChatScreen, but not for anything in TabsNav.

What's happening:

• RN seems to be able to find the route, if I comment out the /stats line in the config, it crashes when I try to nav saying: Error: Failed to parse the href to a navigation state.
• RN just isn't navigating. It silently does nothing.
• linkTo to /account works just fine

I know that with 7.x, navigating to nested navigators isn't supported and in the docs (.x/#changes-to-the-navigate-action) they explicitly mention that and how to use navigation.navigate(...) with some new props in order to do so.

But what about linkTo(...)? Was it also affected?

After updating to "@react-navigation/native": "^7.0.3", using linkTo from useLinkTo() isn't working as it used to in ReactNative.

My linking config is somewhat complex:

const config = {
  screens: { // Root navigator: Menu Nav
    StackNav: {
      screens: {
        TabContainer: '/places',
        TabsNav: {
          screens: {
            Screen1: `/summary`,
            Screen2: '/stats',
          },
        },
        Screen3: '/account'
      }
    },
    Screen4: '/chat'
  }
}

...and using useLinkTo() to link to /stats isn't working anymore. It used to work in 6.x. I'm using it from within my own app to navigate when I might not have a It works fine so far for StackNav and ChatScreen, but not for anything in TabsNav.

What's happening:

• RN seems to be able to find the route, if I comment out the /stats line in the config, it crashes when I try to nav saying: Error: Failed to parse the href to a navigation state.
• RN just isn't navigating. It silently does nothing.
• linkTo to /account works just fine

I know that with 7.x, navigating to nested navigators isn't supported and in the docs (https://reactnavigation./docs/upgrading-from-6.x/#changes-to-the-navigate-action) they explicitly mention that and how to use navigation.navigate(...) with some new props in order to do so.

But what about linkTo(...)? Was it also affected?

• react-navigation
• react-navigation-v6

Share Improve this question Follow asked Nov 20, 2024 at 16:29 AndréAndré 47055 silver badges1111 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Turns out I had to include the path to the navigator as well in the path.

Updated config to:

const config = {
  screens: { // Root navigator: Menu Nav
    StackNav: {
      screens: {
        TabsNav: {
          path: '/places',
          screens: {
            Screen1: `/summary`,
            Screen2: '/stats',
          },
        },
        Screen3: '/account'
      }
    },
    Screen4: '/chat'
  }
}

...and updated the linkTo from /stats to /places/stats.

Snack: https://snack.expo.dev/@acrabb713/143a82

本文标签： linkTo no longer working in React Navigation 7Stack Overflow