CODEWITHSUNDEEP
react-nativeexpoexpo-router
Phil Lucks
Phil Lucks

Reputation: 3953

trouble navigating with file based router on Dynamic route

The file based routing hasn't exactly clicked all the way for me. The earlier NextJS pages file routing worked easily. I haven't made the conversion to Expo Route file based for some reason. Possibly because of the combo of Stacks & Tabs & Slots. I have been reading through the dynamic route docs. When I navigate to /pattern/[id] from within my tabs screen, something is getting lost in translation as Expo is not finding the route. I have tried all sorts of things, but I think it's related to my folder structuring. What I would like is: the destination /pattern/[id] to be a child of (tabs), not search.

app
  |__(auth)
     |__ _layout.tsx
     |__(tabs)
       |__ index.tsx
       |__ _layout.tsx
       |
       |__ search
       | |__ index.tsx // <-- from where I navigate from
       | |__ _layout.tsx
       |
       |__ pattern // <-- where I want to navigate to
       |  |__ _layout.tsx
       |  |__ [id].tsx // <-- dynamic pattern id name 
       |__ // other tabs content is ok since no navigation

Here is my Tab's _layout :

export default function TabLayout() {
  return (
    <Tabs>
      <Tabs.Screen
        name="index"
      />
      <Tabs.Screen
        name="search"
      />
      <Tabs.Screen
        name="pattern"
        options={{
          href: null, // based on docs this will hide the tab
      />
  </Tabs>
 )
};

On my search UI, when I press on an item to navigate to,

router.push({
  pathname: '/pattern', // I have also tried pathname: '/pattern/[id]', 
  params: { 
    id: dynamicLabelId
  },
});

The error from Expo is that the route cannot be found. What happened to the pattern route?: enter image description here

Here is my current sitemap from Expo: sitemap

I have since added a different Pattern _layout instead of a Slot, using a Stack:

export default function PatternLayout() {
  return (
    <Stack>
      <Stack.Screen
        name="[id]"
    </Stack>
  );
}

but this doesn't seem to resolve it... I am asking for help on:

  1. why is router.push({ pathname: '/pattern', params: { id: label },}); not working right?
  2. is my file structure ok? Do I need a Stack Screen inside Pattern to capture the [id].tsx page? thank you in advance

Upvotes: 10

Views: 4557

Answers (3)

Frederik Witte
Frederik Witte

Reputation: 955

In my case, I simply forgot to put
export default Page
in my page component. Then the dynamic route was getting picked up and started working.

Upvotes: 0

M&#224;hiii
M&#224;hiii

Reputation: 1

Use this one router.push({pathname:'/(auth)/(tabs)/pattern/, params: { id: dynamicLabelId })

Upvotes: 0

Andrew Einhorn
Andrew Einhorn

Reputation: 1163

I'm not entirely sure, but I would make two comments here:

  1. If you want to hide a tab, don't use href: null, instead use tabBarButton: () => null, this will hide the tab without messing with the routing.

  2. Your routing declaration router.push({ pathname: '/pattern', params: { id: label },}) will send the router to the following url: /pattern?id:123. But what you actually want is it to go to /pattern/123. To do this, try using router.push({ pathname: /pattern/`${label}` .

This is working for me with dynamic routing, hope it helps.

Upvotes: 0

Related Questions