Expo+React Native标签页路由异常：始终显示+not-found页面求助

核心问题分析 #

Expo Router（基于文件系统路由）会优先匹配最具体的路径，运行后直接跳转到+not-found.tsx，大概率是根布局或标签页布局的路由配置不符合规则，或是未定义默认首页路径。

常见修复步骤 #

1. 修正app/_layout.tsx配置 #

根布局需正确设置路由出口，并指定存在的初始路由：

import { Stack } from 'expo-router';

export default function RootLayout() {
  // initialRouteName 指向标签页路由组
  return <Stack initialRouteName="(tabs)" />;
}

如果未指定initialRouteName，Expo会尝试匹配空路径（app/index.tsx），若该文件不存在则跳转至404页面。

2. 修正标签页布局的命名与结构 #

你可能犯了命名错误：标签页布局的正确路径是app/(tabs)/_layout.tsx，而非app/(tabs)_layout.tsx。Expo Router中，括号包裹的是路由组，组内的_layout.tsx才是该组的布局文件。

正确的标签页布局示例（app/(tabs)/_layout.tsx）：

import { Tabs } from 'expo-router';

export default function TabsLayout() {
  return (
    <Tabs>
      {/* 每个Screen对应(tabs)目录下的页面文件 */}
      <Tabs.Screen name="home" options={{ title: '首页' }} />
      <Tabs.Screen name="profile" options={{ title: '我的' }} />
    </Tabs>
  );
}

同时需在app/(tabs)/目录下创建对应页面文件（如home.tsx、profile.tsx），否则路由无法匹配仍会跳转至404。

3. 兜底方案：添加首页重定向 #

若根布局未设置initialRouteName，可在app/目录下创建index.tsx，直接重定向到标签页：

import { Redirect } from 'expo-router';

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

遵循Expo Router规则的同时兼顾可维护性，推荐目录结构如下：

├── app/                      # 路由核心目录
│   ├── _layout.tsx          # 根路由布局（Stack/Tabs/Drawer）
│   ├── +not-found.tsx       # 404页面
│   ├── index.tsx            # 首页重定向（可选）
│   ├── (auth)/              # 鉴权路由组（登录、注册）
│   │   ├── _layout.tsx      # 鉴权组布局（无导航栏）
│   │   ├── login.tsx
│   │   └── register.tsx
│   └── (tabs)/              # 主标签页路由组
│       ├── _layout.tsx      # 标签页布局
│       ├── home.tsx         # 首页
│       ├── profile.tsx      # 个人中心
│       └── settings.tsx     # 设置页面
├── components/              # 全局公共组件
│   ├── ui/                  # UI原子组件（Button、Input、Card等）
│   ├── layouts/             # 布局组件（Header、Footer）
│   └── shared/              # 业务通用组件（PostCard、UserAvatar）
├── constants/               # 常量配置（颜色、字体、API地址等）
│   ├── colors.ts
│   ├── fonts.ts
│   └── api.ts
├── hooks/                   # 自定义Hooks
│   ├── useAuth.ts
│   ├── useTheme.ts
│   └── useFetch.ts
├── services/                # 业务服务层（API请求、数据处理）
│   ├── authService.ts
│   ├── postService.ts
│   └── storageService.ts
├── utils/                   # 工具函数（格式化、验证、通用方法）
│   ├── formatters.ts
│   ├── validators.ts
│   └── helpers.ts
├── assets/                  # 静态资源
│   ├── images/
│   ├── fonts/
│   └── icons/
└── types/                   # TypeScript类型定义
    ├── auth.ts
    ├── post.ts
    └── user.ts

结构说明 #

• 路由组划分：用括号()包裹路由组，区分鉴权、主标签页等场景，组内布局独立，互不干扰。
• 组件分层：将UI原子组件、布局组件、业务组件分离，提升复用性。
• 逻辑分离：hooks处理状态逻辑，services处理业务请求，utils处理通用工具方法，让页面组件专注渲染。
• 类型统一：集中管理TypeScript类型，避免重复定义。

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