How do I setup a navigation loop? Two dynamic routes that the user could constantly navigate over?

[lewisd1996]

TLDR: I have 2 dynamic routes. I want the user to be able to traverse these two routes indefinitely, with the back button taking them back through the pages they visited.

Hi guys, I have a feed that shows cars, with the following structure:

├──/feed
│   ├──_layout.tsx
│   ├──index.tsx
│   ├──/car
│   │   ├── _layout.tsx
│   │   ├── [car_id].tsx
│   ├──/manufacturer
│   │   ├── _layout.tsx
│   │   ├── [manufacturer_id].tsx

• A user could be on the feed page and tap on a Tesla Cybertruck -> [car_id] - From there, they may tap on Tesla -> [manufacturer_id]
• From there they may tap on Tesla Model 3 -> [car_id]
• From there they may tap on related manufacturer Polestar -> [manufacturer_id]
• Then the Polestar 3 -> [car_id] and so on...

At the moment, I am using the useRouter hook and in the feed route, using the following to navigate to a car page:

// feed

onPress={() => {
  router.push(`feed/car/${car.id}`);
}}

Then, on the [car_id] page, I route to a manufacturer using the following:

// feed/car/[car_id]

onPress={() => {
  router.push(`/feed/manufacturer/${car.manufacturerId}`);
}}

And on the [manufacturer_id] page, you could go back to a car page, which is the same as what happens on /feed:

// feed/manufacturer/[manufacturer_id]

onPress={() => {
  router.push(`/feed/car/${car.id}`);
}}

At the moment, the flow works well when going from feed -> car -> manufacturer, but after I go back up the tree to a car, it shows the car that was previously viewed for a second, and then quickly changes to the newly selected car.

The animation goes backwards and then forwards again, also pressing the back button takes you back to the feed page rather than going back through the stack of routes, so I am confused as to what I am doing wrong.

I presumed .push just adds the route onto the stack, like a list. Since this route is technically infinite, as a user could keep going looping through these two dynamic routes forever, how do I get the nice stacked navigation, where the user can tap "back" and view all the pages they viewed over time.

[lewisd1996]

Here is a diagram of what's happening:

[lewisd1996]

I have fixed it, it seems removing the _layout.tsx's in my sub folders fixes the issue. I suppose they didn't serve much purpose, there were no subroutes needed in /car or /manufacturer... maybe I have still done something wrong, but for now, this file structure works:

├──/feed
│   ├──_layout.tsx
│   ├──index.tsx
│   ├──/car
│   │   ├── [car_id].tsx
│   ├──/manufacturer
│   │   ├── [manufacturer_id].tsx

My _layout.tsx in /feed looks like this:

import { Stack, useNavigation, useRouter } from "expo-router";
import React from "react";

import { BasicScreenHeader, DrawerHeader } from "../../../../components";

export default function FeedLayout() {
  const navigation = useNavigation();
  const router = useRouter();
  console.log(JSON.stringify(navigation.getState().routes));
  return (
    <Stack
      initialRouteName="index"
      screenOptions={{
        fullScreenGestureEnabled: true,
        headerShown: false,
      }}
    >
      <Stack.Screen
        name="index"
        options={{
          headerShown: true,
          header: () => <DrawerHeader showLogo />,
        }}
      />
      <Stack.Screen
        name="car/[car_id]"
        options={{
          headerShown: true,
          header: () => (
            <BasicScreenHeader
              onBackPress={() => {
                router.back();
              }}
            />
          ),
        }}
      />
      <Stack.Screen
        name="manufacturer/[manufacturer_id]"
        options={{
          headerShown: true,
          header: () => (
            <BasicScreenHeader
              onBackPress={() => {
                router.back();
              }}
            />
          ),
        }}
      />
    </Stack>
  );
}