Expo Router：跨标签栈跳转详情页且保留标签栏并避免重复路由

针对你遇到的「跳转详情页覆盖标签栏」和「路由重复、深度链接混乱」问题，核心思路是利用Expo Router 共享路由+栈嵌套，让多个标签页栈复用同一个详情页组件，同时保持路由统一、标签栏可见。

一、调整路由结构 #

保留根目录的details文件夹，同时在每个标签页目录下仅保留列表页，路由结构如下：

(tabs)
│   _layout.tsx
│
└── explore
│   │   _layout.tsx
│   │   index.tsx  # Explore列表页
│
└── favorites
│   │   _layout.tsx
│   │   index.tsx  # Favorites列表页
│
└── profile
│   │   _layout.tsx
│   │   favorites.tsx  # Profile下的收藏列表页
│
details
│   _layout.tsx
│   [id].tsx  # 唯一的详情页组件
│
_layout.tsx

二、配置标签页的栈布局 #

在每个需要跳转详情页的标签页布局文件中，通过Stack.Screen引用根目录的details/[id]路由，这样详情页会在当前标签的栈中打开，保留底部标签栏。

示例1：explore/_layout.tsx #

import { Stack } from 'expo-router';

export default function ExploreLayout() {
  return (
    <Stack>
      <Stack.Screen name="index" options={{ title: '发现' }} />
      {/* 用相对路径引用根目录的详情页路由 */}
      <Stack.Screen 
        name="../../details/[id]" 
        options={{ title: '项目详情' }} 
      />
    </Stack>
  );
}

示例2：profile/favorites/_layout.tsx #

对于更深层级的页面，调整相对路径即可：

import { Stack } from 'expo-router';

export default function ProfileFavoritesLayout() {
  return (
    <Stack>
      <Stack.Screen name="favorites" options={{ title: '我的收藏' }} />
      {/* 向上三级找到根目录的details */}
      <Stack.Screen 
        name="../../../details/[id]" 
        options={{ title: '项目详情' }} 
      />
    </Stack>
  );
}

三、统一跳转逻辑 #

所有列表页跳转详情页时，直接使用统一的根路径：

import { router } from 'expo-router';

// 点击项目时跳转
const handleItemPress = (itemId: string) => {
  router.push(`/details/${itemId}`);
};

四、深度链接配置 #

在app.json中配置统一的深度链接规则，确保外部链接能直接跳转到详情页：

{
  "expo": {
    "scheme": "yourapp",
    "web": {
      "bundler": "metro",
      "router": {
        "origin": false
      }
    },
    "deepLinks": {
      "domains": ["yourapp.com"],
      "paths": ["/details/:id"]
    }
  }
}

方案优势 #

1. 原生端体验：跳转详情页时保留底部标签栏，符合原生应用交互逻辑
2. Web端统一路由：所有详情页路由都是/details/xxx，无重复路由，利于SEO和用户记忆
3. 代码复用：仅需维护一个详情页组件，避免重复代码
4. 深度链接友好：统一的路由规则让外部链接能精准定位到详情页

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