Expo Router无法检测路由求助（Expo SDK 52 + TypeScript）

我目前正在使用Expo SDK 52和TypeScript开发项目，采用Expo Router实现页面导航，在开发认证系统时遇到问题：Expo Router无法检测我的路由！

文件夹结构 #

app
  admin
    _layout.tsx
    index.tsx
    menu.tsx
  auth
    _layout.tsx
    forgotPassword.tsx
    index.tsx (login)
  client
    _layout.tsx
    index.tsx
    menu.tsx
  _layout.tsx
  +not-found.tsx
routes
  protected.routes.tsx

app/_layout.tsx 代码 #

import {
  DarkTheme,
  DefaultTheme,
  ThemeProvider,
} from '@react-navigation/native';
import { useFonts } from 'expo-font';
import { Stack, useRootNavigationState, useSegments } from 'expo-router';
import * as SplashScreen from 'expo-splash-screen';
import { StatusBar } from 'expo-status-bar';
import { useEffect } from 'react';
import 'react-native-reanimated';
import { QueryClient, QueryClientProvider } from 'react-query';

import { useColorScheme } from '@/hooks/useColorScheme';
import { AuthProvider } from '@/context/auth.context';
import ToastProvider from '@/context/toast.context';

SplashScreen.preventAutoHideAsync();

export default function RootLayout() {
  const colorScheme = useColorScheme();
  const [loaded] = useFonts({
     'Inter-Light': require('../assets/fonts/Inter/Inter-Light.ttf'),
     'Inter-Regular': require('../assets/fonts/Inter/Inter-Regular.ttf'),
     'Inter-Medium': require('../assets/fonts/Inter/Inter-Medium.ttf'),
     'Inter-SemiBold': require('../assets/fonts/Inter/Inter-SemiBold.ttf'),
     'Inter-Bold': require('../assets/fonts/Inter/Inter-Bold.ttf'),
     'Inter-ExtraBold': require('../assets/fonts/Inter/Inter-ExtraBold.ttf'),
     'Bagoss-Regular': require('../assets/fonts/Bagoss/BagossStandardTRIALRegular.ttf'),
     'Bagoss-Medium': require('../assets/fonts/Bagoss/BagossStandardTRIAL-Medium.ttf'),
     'Bagoss-Bold': require('../assets/fonts/Bagoss/BagossStandardTRIAL-Bold.ttf'),
     'Bagoss-Light': require('../assets/fonts/Bagoss/BagossStandardTRIAL-Light.ttf'),
   });

   console.log(useRootNavigationState());
   console.log('-------', useSegments());

   const queryClient = new QueryClient({
     defaultOptions: {
       queries: { retry: true },
     },
   });

   useEffect(() => {
     if (loaded) {
       SplashScreen.hideAsync();
     }
   }, [loaded]);

   if (!loaded) {
      return null;
   }

   return (
      <AuthProvider>
       <ToastProvider>
          <QueryClientProvider client={queryClient}>
            <ThemeProvider
             value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}
            >
              <Stack />
            <StatusBar style="auto" />
           </ThemeProvider>
        </QueryClientProvider>
     </ToastProvider>
   </AuthProvider>
  );
}

routes/protected.routes.tsx 代码 #

import { useAuth } from '@/hooks/useAuth';
import { Redirect, Slot, useSegments } from 'expo-router';
import { ReactNode } from 'react';

type ProtectedRouteProps = {
  children: ReactNode;
};

export default function ProtectedRoute({ children }: ProtectedRouteProps) {
  const { auth } = useAuth();
  const segments = useSegments();

  if (!auth) {
    return <Redirect href="/auth" />;
  }

  if (segments[0] === 'admin' && auth.role !== 'admin') {
    return <Redirect href="/client" />;
  }

  if (segments[0] === 'client' && auth.role !== 'client') {
    return <Redirect href="/admin" />;
  }

  return <Slot />;
}

控制台日志输出 #

console.log(useRootNavigationState()); // {"index": 0, "key": "stack-GkzxKtSO4HYHhXeZIWrdu", "preloadedRoutes": [], "routeNames": ["auth", "tabs", "admin", "client", "_sitemap", "+not-found"], "routes": [{"key": "+not-found-ziqvXfNdJaLXTtm-nGB2y", "name": "+not-found", "params": undefined, "path": ""}], "stale": false, "type": "stack"}
console.log(useSegments()); // ["+not-found"]

使用的版本信息 #

• expo: ~52.0.33
• expo-router: ~4.0.17
• react-native: 0.76.7
• react: 18.3.1

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