With React Native Expo Router, I would like to define a default stack different from index.tsx. In this toy example with one simple stack named page1.tsx, expo router does not find it and display “Unmatched route (page could not me found)”.
To reproduce the issue,
- npx create-expo-app@latest
- npm run reset-project
and change the following 2 files:
in app folder:
_layout.tsx
page1.tsx
_layout.tsx file:
import { Stack } from "expo-router";
export default function RootLayout() {
return (
<Stack>
<Stack.Screen name="page1" options={{ title: "P1" }} />
</Stack>
);
}
page1.tsx file:
import { Text, View } from "react-native";
export default function Index() {
return (
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
}}
>
<Text>Edit app/index.tsx to edit this screen.</Text>
</View>
);
}
package.json :
"dependencies": {
"expo": "~52.0.19",
"expo-router": "~4.0.13",
"expo-web-browser": "~14.0.1",
"react": "18.3.1",
"react-dom": "18.3.1",
"react-native": "0.76.5",
Do note that the expo-router currently has an open issue about initialRouteName not functioning properly. I’ve also encountered issues with it, and the best solution for me has been just to set up redirects like he said or use router.replace() if that doesn’t work.
https://github.com/expo/router/issues/723
Here’s the GitHub issue if you want to take a look.
1
Expo Router works with file-based routing, much like traditional websites. The index file is the default entry into your app / a specific directory.
If you for whatever reason would like to use “page1” as your default entry file instead, there are two ways to accomplish this:
- The less hacky way. You could make an index file that returns a Redirect to “/page1”
- You could use the unstable settings to redefine the Expo Router behaviour to your expectation. You can set initialRouteName to “page1” on your stack and this should cause it to act like the index.
1