Expo Router v2中认证/未认证用户路由及布局配置问题

针对你遇到的 Expo Router v2 路由配置问题，以下是具体的调整方案，满足「(main) 页面独立布局、已认证用户可直接访问子路由、根路径跳转首页」的需求：

1. 保留现有路由结构 #

不需要修改文件层级，保持原结构：

(main)
 | _layout.tsx
 | dashboard.tsx
 | profile.tsx
 | order.tsx
 | wishlist.tsx
 | history.tsx
(home)
 | _layout.tsx
 | index.tsx
 | products.tsx
 | offers.tsx
login.tsx
_layout.tsx

2. 重构根目录 _layout.tsx #

根布局改用 Stack 导航（替代原 Tabs），这样可以灵活处理路由重定向和认证逻辑，同时确保根路径默认跳转至 (home) 组：

import React from 'react';
import { Stack, useRouter, useSegments } from 'expo-router';
// 替换成你自己的认证状态 hook
import { useAuth } from './hooks/useAuth';

export default function RootLayout() {
  const { isAuthenticated } = useAuth();
  const router = useRouter();
  const segments = useSegments();

  React.useEffect(() => {
    // 处理未认证用户访问 (main) 组页面的情况：跳转到登录页
    const inMainGroup = segments[0] === '(main)';
    if (!isAuthenticated && inMainGroup) {
      router.replace('/login');
    }

    // 处理已认证用户访问登录页的情况：跳转到仪表盘
    if (isAuthenticated && segments[0] === 'login') {
      router.replace('/(main)/dashboard');
    }

    // 处理直接访问 /dashboard 等路由的情况：重定向到 (main) 组内的对应页面
    const mainSubRoutes = ['dashboard', 'profile', 'order', 'wishlist', 'history'];
    if (mainSubRoutes.includes(segments[0]) && isAuthenticated) {
      router.replace(`/(main)/${segments[0]}`);
    }
  }, [isAuthenticated, segments, router]);

  return (
    <Stack>
      <Stack.Screen name="(home)" options={{ headerShown: false }} />
      <Stack.Screen name="login" options={{ headerShown: false }} />
      <Stack.Screen name="(main)" options={{ headerShown: false }} />
    </Stack>
  );
}

3. 完善 (main)/_layout.tsx #

在这个布局里实现独立的头部、底部，并用 Tabs 包裹所有 (main) 子页面：

import React from 'react';
import { Tabs } from 'expo-router';
// 替换成你自己的头部、底部组件
import MainHeader from '../components/MainHeader';
import MainFooter from '../components/MainFooter';

export default function MainLayout() {
  return (
    <>
      {/* 自定义头部 */}
      <MainHeader />
      <Tabs
        screenOptions={{
          tabBarPosition: 'bottom',
          // 隐藏默认 Tab 头部，用自定义的 MainHeader
          headerShown: false,
        }}
      >
        <Tabs.Screen name="dashboard" options={{ tabBarLabel: '仪表盘' }} />
        <Tabs.Screen name="profile" options={{ tabBarLabel: '个人中心' }} />
        <Tabs.Screen name="order" options={{ tabBarLabel: '我的订单' }} />
        <Tabs.Screen name="wishlist" options={{ tabBarLabel: '收藏夹' }} />
        <Tabs.Screen name="history" options={{ tabBarLabel: '浏览历史' }} />
      </Tabs>
      {/* 自定义底部 */}
      <MainFooter />
    </>
  );
}

4. 保持 (home)/_layout.tsx 正常工作 #

继续用 Tabs 管理首页组的页面：

import React from 'react';
import { Tabs } from 'expo-router';

export default function HomeLayout() {
  return (
    <Tabs>
      <Tabs.Screen name="index" options={{ tabBarLabel: '首页' }} />
      <Tabs.Screen name="products" options={{ tabBarLabel: '商品' }} />
      <Tabs.Screen name="offers" options={{ tabBarLabel: '优惠' }} />
    </Tabs>
  );
}

核心逻辑说明 #

1. 根布局用 Stack：避开 Tabs 导航的路由匹配限制，实现灵活的认证路由拦截和重定向。
2. (main) 组独立布局：通过 (main)/_layout.tsx 统一注入头部、底部，所有子页面自动继承该布局。
3. 直接访问路由处理：通过 useSegments 检测用户访问的路径，将 /dashboard 这类路径重定向到 /(main)/dashboard，确保路由匹配正确。
4. 根路径跳转：根 Stack 的初始路由默认指向 (home)，打开网站直接进入首页。

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