'native-stack of react-navigation 6 does not find a route object

Under "react-navigation/stack" of react-navigation 6, It did well working all of function like useRoute, useNavigation..etc

But, I changed stack navigation to react-navigation/native-stack from react-navigation/stack.

native-stack does not found a route object in "GroupHeaders component"

Below my code.

  1. Root navigation
import { createNativeStackNavigator, NativeStackHeaderProps } from "@react-navigation/native-stack";

const RootNavigation = createNativeStackNavigator();
    <NavigationContainer>
        <RootNavigation.Navigator>
          <RootNavigation.Screen
            name="Main-root"
            component={TabNavigation}
            options={{ headerShown: false }}
          />
        
          <RootNavigation.Screen
            name="PostDetail-root"
            component={PostDetailContainer}
            options={{ header: () => <GroupHeaders /> }}. // ***** HERE
          />
         // ...other screen...

  1. Tab navigation
      <Tab.Navigator
        initialRouteName="home-tab"
        //...
        >
        <Tab.Screen
          name="home-tab"
          component={HomeNavigation}
          options={{
            headerShown: false,
            tabBarLabel: "Home",
            //...
          }}
        />
  1. GroupHeaders component
const GroupHeaders = ({}) => {
  const route = useRoute(); //**** HERE, RN occurs error message of "~not find a route object~~" 
  // ... other code



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source