I want to know the current route name but inside the navigation js file, I use the useRoute hook in any component and work well, but I get this error when I use useRoute inside navigation.js

Error: Couldn't find a route object. Is your component inside a screen in a navigator?

navigation.js code example,

export default function Navigation() {
  const route = useRoute(); // show error >> Error: Couldn't find a route object. Is your component inside a screen in a navigator?
  
  return (
      <Stack.Navigator
        screenOptions={{
          headerShown: false,
        }}>
            <Stack.Screen name="HomeScreen" component={HomeScreen} />
      </Stack.Navigator>
  );
}

when I remove useRoute, the Error is gone, But I need to use useRoute or any other way to get current route name inside navigation.js file.

CodePudding user response：

You can pass the navigationContainerRef from the NavigationContainer to the Navigation comomponent to make the navigation object accessible.

Consider the following code snippet.

import { createNavigationContainerRef } from "@react-navigation/native"

export const navigationRef = createNavigationContainerRef()

const App = () => {
    return <NavigationContainer
              ref={navigationRef}>
                 <Navigation navigation={navigationRef} />
            </NavigationContainer>  
}
export default App

Then, inside Navigation.

export default function Navigation({ navigation }) {

  const route = navigation.current?.getCurrentRoute()
  
  return (
      <Stack.Navigator
        screenOptions={{
          headerShown: false,
        }}>
            <Stack.Screen name="HomeScreen" component={HomeScreen} />
      </Stack.Navigator>
  );
}

The current route name get then be accessed using route?.name.

Edit: As jhon antoy correctly pointed out in the comments, this does not update the current route state if we navigate to a different screen. We need to update this ourselves as follows.

export const navigationRef = createNavigationContainerRef();

const App = () => {
  const [routeName, setRouteName] = useState();

  return (
    <NavigationContainer
      ref={navigationRef}
      onReady={() => {
        setRouteName(navigationRef.getCurrentRoute().name)
      }}
      onStateChange={async () => {
        const previousRouteName = routeName;
        const currentRouteName = navigationRef.getCurrentRoute().name;
        console.log("route", currentRouteName)
        setRouteName(currentRouteName);
      }}
    >
       <Navigation routeName={routeName} />
    </NavigationContainer>
  );
}

export default App;

Inside Navigation.

export function Navigation(props) {

  const route = props.routeName

  console.log(props)

  return (
      <Stack.Navigator
        screenOptions={{
          headerShown: false,
        }}>
            <Stack.Screen name="HomeScreen" component={HomeScreen} />
      </Stack.Navigator>
  );
}

I have made a snack with some simple navigation buttons.