如何解决React Native中expo-router的布局路由弃用及路由不存在错误？

1. 调整目录结构与文件命名 #

将原group/[uniqueURL].tsx文件迁移并重命名为group/[uniqueURL]/index.tsx，保留group/[uniqueURL]/edit.tsx，最终目录结构如下：

app/
  group/
    [uniqueURL]/
      index.tsx  // 原[uniqueURL].tsx的页面内容
      edit.tsx   // 编辑页面

2. 修改根布局的路由配置 #

在根_layout.tsx中，移除对group/[uniqueURL]/edit的单独路由声明，只保留父路由配置即可，Expo Router会自动识别嵌套子路由。修改后的代码示例：

// ... 其他导入
function RootLayoutNav() {
  // ... 其他逻辑
  return (
    <SafeAreaProvider>
      {/* ... 其他代码 */}
      <Stack>
        {/* ... 其他路由页面 */}
        <Stack.Screen 
          name="group/[uniqueURL]" 
          options={{
            header: () => <CustomHeader />,
          }} />
      </Stack>
    </SafeAreaProvider>
  );
}

3. （可选）添加嵌套布局统一管理子路由 #

如果需要给[uniqueURL]下的所有子路由（首页、编辑页）统一设置导航栏或布局，可以创建group/[uniqueURL]/_layout.tsx，示例代码：

import { Stack } from 'expo-router';
import CustomHeader from '../path/to/CustomHeader'; // 替换为你的组件路径

export default function GroupDynamicLayout() {
  return (
    <Stack>
      <Stack.Screen 
        name="index" 
        options={{ header: () => <CustomHeader /> }} 
      />
      <Stack.Screen 
        name="edit" 
        options={{ header: () => <CustomHeader /> }} 
      />
    </Stack>
  );
}

这种情况下，根布局中可以不再单独配置group/[uniqueURL]的路由选项，嵌套布局会接管子路由的导航设置。

错误原因说明 #

• 第一个错误：当在动态路由文件夹下添加子路由时，原[uniqueURL].tsx作为单独页面文件的格式已过期，Expo Router要求此时父路由需通过布局文件或默认index.tsx来承载页面内容。
• 第二个错误：将原页面改为_layout.tsx后，缺少默认的index.tsx作为父路由的入口页面，同时根布局中声明的子路由无法匹配到正确的文件路径。

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