Unable to nested dynamic route under shared

[Senghuot Lay]

Which package manager are you using? (Yarn is recommended)

yarn

Summary

i am unable to navigate to products screen at all router.push(`${segment}/products/hello`);

I kept getting this error

index.tsx:49 The action 'NAVIGATE' with payload {"name":"[title]","params":{"title":"hello"}} was not handled by any navigator.

Do you have a screen named '[title]'?

If you're trying to navigate to a screen in a nested navigator, see https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator.

my sitemap is showing it correctly

It seems like the only i can approach that for now is to useQueryParams router.push(${segment}/products?title=hello)

Minimal reproducible example

Inside my dynamic layout

import { BackButton } from '@klotti/ui';
import { Stack, useRouter } from 'expo-router';

type Group<T extends string> = `(${T})`;
export type SharedSegment = Group<'index'> | Group<'search'>;

export default function DynamicLayout({ segment }: { segment: SharedSegment }) {
  const { back } = useRouter();
  if (segment === '(index)') {
    return (
      <Stack
        screenOptions={{
          headerLeft: () => <BackButton onPress={back} />
        }}>
        <Stack.Screen
          name='index'
          options={{
            headerShown: false
          }}
        />
        <Stack.Screen
          name='product/[id]'
          options={{
            headerTitle: ''
          }}
        />
        <Stack.Screen
          name='products/[title]'
          options={{
            headerTitle: 'Trending'
          }}
        />
      </Stack>
    );
  }

  return (
    <Stack
      screenOptions={{
        headerLeft: () => <BackButton onPress={back} />
      }}>
      <Stack.Screen
        name='search'
        options={{
          title: 'Search',
          headerLeft: () => null
        }}
      />
      <Stack.Screen
        name='product/[id]'
        options={{
          headerTitle: '',
          headerTransparent: true
        }}
      />
      <Stack.Screen
        name='products/[title]'
        options={{
          headerTitle: 'Products'
        }}
      />
    </Stack>
  );
}

[Senghuot Lay]

I am able to make it work by doing this, but it seems very unconventional
router.push(`${segment}/products?title=trending`);

export const unstable_settings = {
  // Ensure that reloading on `/modal` keeps a back button present.
  initialRouteName: '[title]'
};

export const ProductsLayout = () => {
return <Stack
        screenOptions={{
          headerLeft: () => <BackButton onPress={back} />
        }}>
        <Stack.Screen
          name='[title]'
          initialParams={local}
          options={{
            headerTitle: title
          }}
        />
}

[Senghuot Lay]

Any update on this guys?

[João Mantovani]

Facing the same issue since version 2.0.0

[Johannes]

Facing the same issue while using router.push() from 'expo-router'

[devoren]

maybe related to expo/expo#24457
try this if it works: #793 (comment) temporary solution