React Native Expo动态路由问题：/analytics/:id/requireReAuth匹配失败

问题原因 #

你当前的[id]/_layout.js仅直接渲染了AnalyticsApps组件，没有配置嵌套路由的导航结构，导致React Navigation无法识别/analytics/:id/requireReAuth这个子路由路径，从而抛出“Unmatched Route”错误。

解决方案 #

1. 创建子路由对应的屏幕组件 #

在[id]目录下新建requireReAuth.js文件，作为该子路由的页面组件：

import React from 'react';
import { View, Text } from 'react-native';

const RequireReAuthScreen = ({ route }) => {
  // 通过route.params获取动态id参数
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>重新认证页面，ID: {route.params.id}</Text>
      {/* 这里添加你的重新认证逻辑 */}
    </View>
  );
};

export default RequireReAuthScreen;

2. 修改[id]/_layout.js配置嵌套路由 #

使用expo-router的Stack导航器来管理嵌套路由，将根路由（/analytics/:id）和子路由（/analytics/:id/requireReAuth）都配置进去：

import React from 'react';
import { Stack } from 'expo-router';
import AnalyticsApps from '../AnalysisFirstScreen';
import RequireReAuthScreen from './requireReAuth';

const ItemDetailLayout = () => {
  return (
    <Stack>
      {/* 对应/analytics/:id的默认路由 */}
      <Stack.Screen name="index" component={AnalyticsApps} />
      {/* 对应/analytics/:id/requireReAuth的子路由 */}
      <Stack.Screen name="requireReAuth" component={RequireReAuthScreen} />
    </Stack>
  );
};

export default ItemDetailLayout;

3. 确保跳转路径正确 #

触发跳转时，使用正确的路由格式传递参数：

// 方式1：使用React Navigation的navigate方法
navigation.navigate('analytics/[id]/requireReAuth', { id: '你的动态ID值' });

// 方式2：使用expo-router的router.push
import { router } from 'expo-router';
router.push(`/analytics/${yourId}/requireReAuth`);

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