Expo Router路由匹配失败：React Native文件路由配置异常

核心问题分析 #

你当前的写法错误在于直接在根_layout.tsx中返回Stack组件，这和Expo Router的文件系统路由机制冲突。文件路由中，(auth)/login.tsx对应的路由名称是(auth)/login，但直接实例化的Stack无法正确关联到文件路由的页面，导致路由匹配失败。

正确配置步骤 #

1. 为分组路由添加布局文件 #

分别在(auth)和(main)文件夹下创建_layout.tsx，用来定义各自的栈结构：

(auth)/_layout.tsx

import { Stack } from "expo-router";

export default function AuthLayout() {
  return (
    <Stack initialRouteName="login">
      <Stack.Screen name="login" options={{ headerShown: false }} />
    </Stack>
  );
}

(main)/_layout.tsx

import { Stack } from "expo-router";

export default function MainLayout() {
  return (
    <Stack initialRouteName="home">
      <Stack.Screen name="home" options={{ title: "首页" }} />
    </Stack>
  );
}

2. 修改根_layout.tsx，基于用户状态做路由重定向 #

根布局不再直接返回栈组件，而是通过Redirect或Slot结合用户状态控制路由跳转：

import { Redirect, Slot } from "expo-router";

export default function RootLayout() {
  const user = getUser();

  // 已登录则渲染主路由，未登录直接重定向到登录页
  if (user) {
    return <Slot initialRouteName="(main)" />;
  } else {
    return <Redirect href="/(auth)/login" />;
  }
}

3. 验证路由匹配 #

启动应用后：

• 未登录状态：自动跳转到(auth)/login页面，栈结构由(auth)/_layout.tsx定义，无路由匹配错误。
• 已登录状态：直接渲染(main)/home页面，主栈由(main)/_layout.tsx控制。

额外注意事项 #

• 确保getUser()是同步函数，若为异步获取用户状态，需结合useEffect和状态管理处理，避免初始渲染时的路由闪烁。
• 不要在根布局中直接实例化Stack组件，保持路由结构与文件结构一致是避免匹配错误的核心。

内容的提问来源于stack exchange，提问作者Clytax