CODEWITHSUNDEEP
react-nativenavigationexpo-router
Clytax
Clytax

Reputation: 127

Expo Router Issue: Unmatched Route Error with File-Based Routing in React Native

I'm encountering a frustrating issue with Expo Router in React Native. Despite setting up file-based routing, I keep getting an "unmatched route" error. My goal is to direct the user to AuthStack when they are not logged in and to MainStack when they are logged in. However, I consistently receive the following error message:

No route named "login" exists in nested children: ["(auth)/login", "_sitemap", "[...404]"]

Here's the RootLayout inside my app/_layout.tsx file:


export default function RootLayout() {
const user = getUser();
  return user ? <MainStack /> : <AuthStack />;
}

And this is the AuthStack file:



import { Stack } from "expo-router";

const AuthStack = () => {
  return (
    <Stack initialRouteName="login">
      <Stack.Screen name="login" options={{ headerShown: false }} />
    </Stack>
  );
};

export default AuthStack;

The folder structure is as follows:

app/
  (auth)/
     login.tsx
  (main)/
     home.tsx
_layout.tsx

If I change the Screen name to "(auth)/login," the error disappears, but then it just shows a screen with "Unmatched Route." How can I correctly configure the user to be directed to this screen upon startup? I tried adding a Redirect in the app layout but then the same error apears as earlier.

I also tried adding a AuthLayout in (auth) and having the AuthStack there but it still didnt open that screen on startup and showed unmatched screen.

Upvotes: 5

Views: 3877

Answers (1)

Sebastian Wąsik
Sebastian Wąsik

Reputation: 51

to diagnose your issue, please try creating simple index.tsx in root of your app folder with

import { Text } from "react-native";

export default function Page() {
  return <Text>Home page</Text>;
}

and check if unmatched route disappears - if so just simply create redirect in this file based on your needs

import { Redirect } from "expo-router";

const Index = () => {
    return <Redirect href="/discussions" />;
};
export default Index;

Upvotes: 5

Related Questions