如何在Expo Router中无需(tabs)目录index.tsx设置初始标签页

核心问题在于应用启动时默认导航到根路径/，而该路径对应的根布局尝试加载(tabs)路由组，但(tabs)目录下无index.tsx文件，因此触发not-found.tsx。以下是无需添加(tabs)/index.tsx即可默认显示Events板块的两种配置方案：

方法一：根布局自动跳转至Events板块 #

在根布局文件（app/_layout.tsx）中，通过路由检测实现根路径自动跳转：

import { useRouter, useSegments } from 'expo-router';
import { useEffect } from 'react';
import { ThemeProvider } from '@react-navigation/native';
import { DarkTheme, DefaultTheme } from '@react-navigation/native';
import { useColorScheme } from 'react-native';
import { Stack } from 'expo-router';

function RootLayoutNav() {
  const colorScheme = useColorScheme();
  const router = useRouter();
  const segments = useSegments();

  useEffect(() => {
    // 当路由为根路径时，跳转至Events板块
    if (segments.length === 0) {
      router.replace('/events');
    }
  }, [segments, router]);
  
  return (
    <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
      <Stack>
        <Stack.Screen name='(tabs)' options={{ headerShown: false }}/>
      </Stack>
    </ThemeProvider>
  );
}

export default RootLayoutNav;

方法二：直接设置根Stack初始路由 #

修改根Stack组件的initialRouteName参数，指定启动时直接加载Events板块：

import { ThemeProvider } from '@react-navigation/native';
import { DarkTheme, DefaultTheme } from '@react-navigation/native';
import { useColorScheme } from 'react-native';
import { Stack } from 'expo-router';

function RootLayoutNav() {
  const colorScheme = useColorScheme();
  
  return (
    <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
      <Stack initialRouteName='/events'>
        <Stack.Screen name='(tabs)' options={{ headerShown: false }}/>
      </Stack>
    </ThemeProvider>
  );
}

export default RootLayoutNav;

关键配置验证 #

确保以下现有配置正确无误：

• (tabs)/_layout.tsx中Tabs组件已设置initialRouteName='events'
• 每个Tabs.Screen的name与对应分组目录名（events/search/profile）一致
• Events板块的布局文件路径为(tabs)/events/_layout.tsx，页面文件为(tabs)/events/index.tsx

以上方案均可实现应用启动时默认显示Events板块，同时保留当前的嵌套分组结构，无需额外创建(tabs)/index.tsx。

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