Expo Router刷新时始终提示Unmatched Route，非刷新状态运行正常

数据老陈

2026-6-30

解决Expo Router刷新时"Unmatched Route"异常

问题场景

搭建了Expo Router的Tab结构项目，代码修改保存（Ctrl+S）或移动文件时运行正常，但控制台手动刷新后就弹出"Unmatched Route"错误；把任意文件移出Tab文件夹再移回，能临时恢复正常，直到下次刷新。

修复方案

1. 修正分组路由的组件命名

你当前(mainTabs)/_layout.tsx导出的组件名mainTabs和文件夹名(mainTabs)过于相似，可能导致Expo Router的路由解析冲突。修改组件名：

import { Tabs } from "expo-router";

// 组件名改为MainTabsLayout，避开和文件夹名重复
const MainTabsLayout = () => {
  return <Tabs>
    <Tabs.Screen name="SkillTree" options={{headerTitle: "Skill Tree"}}/>
    <Tabs.Screen name="Profile"/>
    <Tabs.Screen name="TaskView" options={{headerTitle: "Tasks"}}/>
  </Tabs>
}

export default MainTabsLayout;

2. 彻底清除路由缓存

控制台刷新触发了旧的路由缓存，按以下步骤操作：

关闭当前Expo开发服务器
删除项目根目录的.expo文件夹
重启服务器时强制清缓存：npx expo start -c

3. 优化根路由配置

根app/_layout.tsx中可以明确隐藏根Stack的头部，避免嵌套导航冲突：

import { Stack } from "expo-router";
import { StyleSheet } from "react-native";

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

const styles = StyleSheet.create({});
export default RootLayout;

4. 验证子路由文件完整性

确保(mainTabs)文件夹下存在SkillTree.tsx、Profile.tsx、TaskView.tsx三个文件，每个文件都正确导出默认组件，比如：

// SkillTree.tsx示例
import { View, Text } from "react-native";

export default function SkillTree() {
  return (
    <View>
      <Text>Skill Tree</Text>
    </View>
  );
}