使用Expo Router时遭遇"Unmatched Route"错误求助

嘿，我看到你在使用Expo Router时碰到了"Unmatched Route"的报错，结合你给出的项目结构和代码片段，我来帮你梳理几个可能的问题点和解决方向：

你的项目结构 #

app/
  _layout.tsx
  (auth)/
    _layout.tsx
    sign_in.tsx
  (protected)/
    _layout.tsx
    (edit)/
      _layout.tsx
      customer.tsx
      order.tsx
      product.tsx
    (tabs)/
      _layout.tsx
      customers.tsx
      orders.tsx
      products.tsx

你提供的app/_layout.tsx代码 #

import '@/styles/global.css';
import { Stack } from 'expo-router';
import { StatusBar } from 'expo-status-bar';

export const unstable_settings = {
  initialRouteName: '(auth)',
};

export default function Layout() {
  return (
    <>
      <StatusBar style="light" />
      <Stack screenOptions={{ headerShown: false }}>
        <Stack.Screen name="(auth)" />
        <Stack.Screen name="(protected)" />
      </Stack>
    </>
  );
}

可能的问题与修复方案 #

1. 嵌套布局缺少初始路由配置

你在根_layout.tsx里把初始路由设为(auth)，但如果(auth)/_layout.tsx没有指定自己的初始页面，Expo Router就不知道该加载哪个具体的页面，这很容易导致"Unmatched Route"错误。

你可以给(auth)/_layout.tsx加上初始路由配置：

import { Stack } from 'expo-router';

// 指定初始路由为sign_in
export const unstable_settings = {
  initialRouteName: 'sign_in',
};

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

同样的，(protected)/_layout.tsx也需要正确配置嵌套的子路由，比如：

import { Stack } from 'expo-router';

export default function ProtectedLayout() {
  return (
    <Stack screenOptions={{ headerShown: false }}>
      {/* 先加载tabs作为默认页面 */}
      <Stack.Screen name="(tabs)" />
      <Stack.Screen name="(edit)" />
    </Stack>
  );
}

2. Tabs布局未正确配置

(protected)/(tabs)/_layout.tsx需要用Tabs组件来包裹底部导航的页面，确保每个screen的name和文件名完全匹配（注意大小写敏感）：

import { Tabs } from 'expo-router';
import { Ionicons } from '@expo/vector-icons';

export default function TabsLayout() {
  return (
    <Tabs>
      <Tabs.Screen
        name="customers"
        options={{
          tabBarIcon: ({ color }) => <Ionicons name="people" color={color} size={24} />,
          title: '客户',
        }}
      />
      <Tabs.Screen
        name="orders"
        options={{
          tabBarIcon: ({ color }) => <Ionicons name="list" color={color} size={24} />,
          title: '订单',
        }}
      />
      <Tabs.Screen
        name="products"
        options={{
          tabBarIcon: ({ color }) => <Ionicons name="cube" color={color} size={24} />,
          title: '产品',
        }}
      />
    </Tabs>
  );
}

3. 路由跳转路径错误

当你从登录页跳转到受保护的页面时，要确保跳转路径是完整的或者相对正确的。比如从sign_in.tsx跳转到客户列表页，应该用：

navigation.navigate('(protected)/(tabs)/customers');

如果是在(protected)内部的页面跳转，比如从customer.tsx回到tabs页面，可以用相对路径：

navigation.navigate('../(tabs)/customers');

4. 文件名大小写问题

Expo Router对文件名的大小写是敏感的，比如如果你跳转时用了Sign_In但实际文件是sign_in.tsx，就会触发路由匹配失败，一定要保证跳转路径和文件名完全一致。

你可以先按照上面的步骤逐一排查，尤其是先确认所有嵌套布局的初始路由配置是否正确，这是最常见的触发这个错误的原因。

备注：内容来源于stack exchange，提问作者Collaxd