Expo Router中index内嵌套导航器引发同名错误的解决问询

问题根源 #

当你把(tabs)/index.tsx改成(tabs)/index/文件夹后，Expo Router会自动将这个文件夹识别为名为index的屏幕；而外层(tabs)目录的默认路由本身就是index，这就导致了(tabs) > index和(tabs) > index > index的同名嵌套冲突，触发报错。

具体解决方案 #

方法一：重命名index文件夹（推荐，直观简洁）

1. 将(tabs)/index/文件夹重命名为非index的名称，比如(tabs)/home/
2. 修改(tabs)/_layout.tsx，把默认路由指向新的文件夹：

// (tabs)/_layout.tsx
import { Tabs } from 'expo-router';

export default function TabsLayout() {
  return (
    <Tabs initialRouteName="home">
      <Tabs.Screen name="home" options={{ title: '首页' }} />
      {/* 其他Tab页面配置 */}
    </Tabs>
  );
}

3. 在新的(tabs)/home/_layout.tsx中定义栈导航：

// (tabs)/home/_layout.tsx
import { Stack } from 'expo-router';

export default function HomeStackLayout() {
  return (
    <Stack>
      <Stack.Screen name="index" options={{ title: '首页' }} />
      {/* 栈内其他页面，比如detail、settings等 */}
    </Stack>
  );
}

这样既实现了Tabs默认页嵌套栈导航的需求，又彻底避免了同名路由冲突。

方法二：自定义路由别名（不推荐，复杂度高）

如果一定要保留index文件夹名称，可以在app.json/app.config.js中配置路由别名，给内层index设置唯一标识：

// app.json
{
  "expo": {
    "router": {
      "paths": {
        "(tabs)/index": "(tabs)/home"
      }
    }
  }
}

但这种方式会增加路由维护成本，不如重命名文件夹直观易懂。

注意事项 #

• Expo Router的文件路由机制会自动根据文件夹/文件名生成路由名称，嵌套结构中务必保证路由名称唯一，这是框架的冲突保护机制。
• 尽量用语义化名称命名路由文件夹，避免过度依赖index作为通用命名，减少路由冲突概率。

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