Expo Router路由报错：嵌套子路由中不存在/users/[id]路由的解决方法

问题原因 #

1. Tabs.Screen使用了绝对路径：在嵌套的(tabs)/_layout.jsx中，Tabs.Screen的name属性需使用相对于当前布局的路径，不能带前缀/的绝对路径。
2. 动态路由不能直接作为Tab项：users/[id]是动态路由，必须传入id参数才能访问，无法作为Tab的默认加载页面，Tab需要绑定静态、可直接访问的路由。

解决方案 #

1. 调整项目目录结构 #

在(tabs)目录下添加静态的用户列表页users/index.jsx，将动态路由作为详情页嵌套在users目录下，最终结构如下：

app/
  (tabs)/
     index.jsx          # Home Tab对应的页面
     users/
       index.jsx        # Users Tab对应的列表页
       [id].jsx         # 用户详情动态页
  _layout.jsx
index.jsx              # 项目入口文件

2. 修改(tabs)/_layout.jsx代码 #

将Tabs.Screen的name改为相对路径，绑定静态路由：

import React from "react"
import {Tabs} from "expo-router"

const TabLayout = ({params}) => {
  return (
    <Tabs>
      <Tabs.Screen name='index' options={{headerTitle: "Home"}} />
      <Tabs.Screen name='users/index' options={{headerTitle: "Users"}} />
    </Tabs>
  )
}

export default TabLayout

3. 实现用户列表页的跳转逻辑 #

在(tabs)/users/index.jsx中添加跳转到动态详情页的代码，示例如下：

import { View, Text, Pressable, StyleSheet } from 'react-native';
import { useRouter } from 'expo-router';

export default function UsersList() {
  const router = useRouter();
  // 模拟用户数据
  const userList = [
    { id: '1', name: '用户A' },
    { id: '2', name: '用户B' },
    { id: '3', name: '用户C' }
  ];

  return (
    <View style={styles.container}>
      {userList.map(user => (
        <Pressable 
          key={user.id} 
          style={styles.userItem}
          onPress={() => router.push(`/users/${user.id}`)}
        >
          <Text style={styles.userName}>{user.name}</Text>
        </Pressable>
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    gap: 12
  },
  userItem: {
    padding: 12,
    backgroundColor: '#f0f0f0',
    borderRadius: 8
  },
  userName: {
    fontSize: 16
  }
});

额外说明 #

• 确保(tabs)目录下的index.jsx存在，对应Home Tab的页面内容。
• 动态路由users/[id]可通过useLocalSearchParams()获取id参数，示例：

import { useLocalSearchParams } from 'expo-router';
import { View, Text } from 'react-native';

export default function UserDetail() {
  const { id } = useLocalSearchParams();
  return (
    <View>
      <Text>用户ID：{id}</Text>
    </View>
  );
}

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