I'm working on a React Native app using Expo Router with a file-based routing system. My main navigation is handled with Tabs, and I have two primary routes: Home and Benefits.

Structure

Home (/(tabs)):

• Displays a list of benefits (a subset of the full list).
• Each benefit links to its detail page (/benefits/[id]) using <Link>.
• Includes a "View All" button that navigates to the Benefits page (/benefits).

Benefits (/benefits):

• Displays a full list of benefits.
• Each benefit links to its detail page (/benefits/[id]) using <Link>.

Benefit Details (/benefits/[id]):

• Shows detailed information about a selected benefit.
• Has a custom button to navigate back defined in the /benefits _layout.tsx

Problem

When I navigate from Home to a specific benefit detail page (/benefits/[id]) and then return to Home using the Tabs navigation, everything works as expected. However, when I:

1. Click "View All" on the Home page to go to /benefits.
2. Select another benefit to navigate to /benefits/[id].
3. Use the back button to return to /benefits and then back again,
   instead of returning directly to the Home screen, the app shows the first benefit I accessed from Home, and only then navigates back to Home.

Also, sometimes I have to press the back from benefits retail twice to work.

Code Snippets

Home Screen

<Link href="/benefits">
  View All
</Link>
<FlatList
  data={filteredStores.slice(0, 5)}
  renderItem={({ item }: { item: IStore }) => (
    <Link href={`/benefits/${item._id}`} asChild>
      <TouchableOpacity>
        {/* Benefit item content */}
      </TouchableOpacity>
    </Link>
  )}
  keyExtractor={(item: IStore) => item._id}
  horizontal
  contentContainerStyle={{ paddingHorizontal: 18, gap: 18 }}
  showsHorizontalScrollIndicator={false}
/>

Benefits Screen

<FlatList
  data={stores}
  renderItem={({ item }: { item: IStore }) => (
    <Link href={`/benefits/${item._id}`} asChild>
      <TouchableOpacity>
        {/* Benefit item content */}
      </TouchableOpacity>
    </Link>
  )}
/>

/benefits/_layout.tsx

<Stack.Screen
  name="[id]"
  options={{
    headerTitle: '',
    headerShown: true,
    headerTransparent: true,
    headerStyle: { backgroundColor: 'transparent' },
    headerLeft: () => (
      <HeaderBackButton
        onPress={() => router.back()}
        style={{
          borderRadius: 50,
          backgroundColor: 'rgba(0,0,0,0.2)',
          padding: 1,
          paddingLeft: 1,
          width: 35,
          height: 35,
          marginLeft: Platform.OS === 'ios' ? -5 : 0,
        }}
        tintColor="white"
      />
    ),
  }}
></Stack.Screen>

1. I tried combining the push and replace properties in different ways in the <Link> components to see if it would fix the navigation history behavior.

2. I added a from parameter to the URLs (e.g., /benefits/[id]?from=tabs) and modified the onPress behavior of the back button in the headerLeft to navigate to either / (Tabs) or /benefits based on the from parameter. However, this didn't resolve the issue completely.