The action 'REPLACE' with payload {"name":"DrawerNavigationRoutes"} was not handled by any navigator

Viewed 243

I have problem to navigate on an upper layer of navigation hierarchy. Here is my code

 const Auth = () => {
      return (
        <Stack.Navigator initialRouteName="SignInPage">
          <Stack.Screen
            name="SignInPage"
            component={SignInPage}
            options={{headerShown: false,
            title : 'Login'}}
          />
         
           <Stack.Screen
            name="RegisterPage"
            component={RegisterPage} 
            }}
          /> 
        </Stack.Navigator>
      );
    };
    
export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="SplashScreen">
        <Stack.Screen
          name="Auth"
          component={Auth}
          options={{headerShown: false}}
        />
         <Stack.Screen
          name="DrawerNavigationRoutes"
          component={DrawerNavigationRoutes}
          options={{headerShown: false}}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

And I'm trying to use

props.navigation.replace('DrawerNavigationRoutes');

to navigate from SignInPage to DrawerNavigationRoutes but it shows me a

The action 'REPLACE' with payload {"name":"DrawerNavigationRoutes"} was not handled by any navigator.

How can I deal with it?

1 Answers

Your problem is because you're trying to navigate from the Auth navigator to a screen that is not in your Auth navigator, you got it? To what you want you need to use the "navigate to nested navigator" method, that works like this:

props.navigation.navigate('DrawerNavigationRoutes', {
  screen: 'The name of the screen you want to go inside DraweNavigatonRoutes stack navigator',
});

Waiting for your feeback. Thx :).

Related