[Layout children]: No route named "search" exists in nested children
devoren opened this issue · comments
Which package manager are you using? (Yarn is recommended)
yarn
Summary
initialRouteName not working as expected. On root layout:
...
<Stack.Screen name="search" options={{ title: 'Search' }} />
...
![image](https://private-user-images.githubusercontent.com/99968085/252144704-3f00a161-6551-4621-91ac-9b18bcbcd33a.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjMwNTU3MDIsIm5iZiI6MTcyMzA1NTQwMiwicGF0aCI6Ii85OTk2ODA4NS8yNTIxNDQ3MDQtM2YwMGExNjEtNjU1MS00NjIxLTkxYWMtOWIxOGJjYmNkMzNhLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MDclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODA3VDE4MzAwMlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWE5NzAwZTBlYTg1Y2FmNDI4ZWMyZGMwZTE2ZGJmY2RkYTk4MDE1YTMzNGI3NjE2MWI4ZmQxNDkwNTg1ZjFmNGQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.ZTOrKFQGV9CKRHJ5a0Co5bInr495Pk9oBdAB1Y_IE80)
Search layout:
export default function SearchLayout() {
return (
<Stack screenOptions={{ headerShown: false }} initialRouteName="index">
<Stack.Screen name="index" options={{ presentation: 'fullScreenModal' }} />
<Stack.Screen name="autocomplete" options={{ presentation: 'fullScreenModal' }} />
</Stack>
);
}
[Layout children]: No route named "search" exists in nested children: ["(tabs)", "[...unmatched]", "auth", "notifications/[id]", "search/autocomplete", "search/index", "_sitemap"]
I can't route to search, useRouter().push("/search")
Minimal reproducible example
export const unstable_settings = {
initialRouteName: 'index',
};
export default function SearchLayout() {
return (
<Stack screenOptions={{ headerShown: false }} initialRouteName="index">
<Stack.Screen name="index" options={{ presentation: 'fullScreenModal' }} />
<Stack.Screen name="autocomplete" options={{ presentation: 'fullScreenModal' }} />
</Stack>
);
}
RootLayout:
<Stack
initialRouteName="(tabs)"
screenOptions={{
headerShadowVisible: false,
}}>
<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
<Stack.Screen name="search" options={{ title: 'Поиск' }} />
</Stack>
In (tabs) i have a custom tabbar button that routes to '/search' but i can't.
Instead of "index" on the search page, if I create another file whose name is not "index" and then if I navigate to it, it works fine.
Per the error message, use search/index
as the name.
FYI -- I think all the downvotes on this one is because the docs say otherwise.
https://docs.expo.dev/router/create-pages/
Files named index match the parent directory and do not add a path segment. For example, app/settings/index.js matches /settings in the app.