React Navigation: how to access component related to path in the URL?

Question

On my React Native app (web implementation, with Expo managed workflow), I have implemented react navigation. I have everything based on Stack. Apparently, there is a good match between the paths and the components associated to those paths. Example: when I visit the log-in page, I can read in the URL myapp/log-in, if I go to settings, I can read myapp/settings.

However, when I try to manually type my URL: myapp/settings, I am taken to my initial route (myapp/log-in). I'm trying to do this, my goal is that from an external site, I can directly take the user to myapp/settings.

For trying to achieve my goal, I went basically through all the documentation related to this and can't find what I'm doing wrong:

• https://reactnavigation.org/docs/deep-linking/
• https://reactnavigation.org/docs/configuring-links
• https://reactnavigation.org/docs/web-support
• https://reactnavigation.org/docs/navigation-container/#linking

I already created an issue on GitHub: https://github.com/react-navigation/react-navigation/issues/11162

On my example repository, you can confirm the behavior I'm describing: https://github.com/JMRMEDEV/navigation-issues, the README has some extra details on the implementation.

• I already tried different setup like defining my schema on my app.json
• I tried to set my prefixes on my config.
• I tried to remove the Stack.Group (thinking that probably could be taken as a nested navigator and use Stack.Screen as components in the top level.
• I tried to define my screens config as objects instead of strings EG: Settings: {path: 'settings'} instead of Settings: 'settings'.

Answer 1

I just noticed that in the documentation, the following concept is not that clear:

We have our config object:

const config = {
  screens: {
    Home: 'home',
    SignUp: 'sign-up',
  },
};

const linking = {
  config,
  prefixes: [prefix],
};

In here, I thought that Chat and Profile referred to the actual react components (since they are usually referred as screens), but I noticed that they were referring to the screen names. Therefore, when we have something like:

<NavigationContainer linking={linking}>
  <Stack.Navigator
    initialRouteName={'home'}
    screenOptions={{
      animation: 'none',
      headerShown: false,
    }}
  >
    <Stack.Screen component={Home} name="home" />
    <Stack.Screen component={SignUp} name="signUp" />
  </Stack.Navigator>
</NavigationContainer>

The cited config object will not work (due to the sensitive casing), and should be updated to something like:

const config = {
  screens: {
    Home: 'home',
    signUp: 'sign-up', // The key will be the screen name and the value will be the path
  },
};