Expo Router中使用数组语法配置共享路由的实现咨询

Hey，我之前在Expo Router项目里正好踩过类似的共享路由坑，给你梳理一套能直接落地的解决方案：

一、先搞定共享路由的文件夹结构 #

Expo Router的数组语法就是专门解决这种跨标签共享页面需求的，你的文件夹结构可以这么调整：

在(tabs)目录下，创建一个用数组语法命名的文件夹，把需要共享路由的标签页都列进去，比如叫(index,search,post)，然后把共享的页面放在这个文件夹里：

app/
 _layout.tsx (根布局)
 (tabs)/
 -- _layout.ts (标签页根布局)
 -- (index)/
 ---- _layout.tsx
 ---- index.tsx
 ---- screenxy.tsx
 -- search/
 ---- _layout.tsx
 ---- index.tsx
 ---- screenxy.tsx
 -- post/
 ---- _layout.tsx
 ---- index.tsx
 -- (index,search,post)/  <!-- 核心：数组语法的共享组文件夹 -->
 ---- user/
 ------ [id].tsx  <!-- 共享的用户详情页 -->
 ---- organization/
 ------ [id].tsx  <!-- 共享的组织详情页 -->
 auth/
 ...

这个结构的好处是：user/[id]会自动关联到index、search、post这三个标签页的上下文，同时完全不影响每个标签页自己的专属页面（比如(index)里的screenxy.tsx）。

二、布局处理：完全不用额外改现有布局！ #

共享路由会自动继承触发它的标签页的布局，你完全不需要修改现有的_layout.tsx文件：

• 从搜索标签跳转到user/[id]，页面会自动套上search/_layout.tsx的布局，保留搜索标签的导航栏、样式和历史记录；
• 从首页标签跳转过来，就套上(index)/_layout.tsx的布局，完全符合你的需求。

唯一要注意的是：每个标签页自己的_layout.tsx要保持Stack或者你需要的布局类型，这样共享页面才能正确嵌入进去。

三、导航的正确姿势：不用写标签前缀！ #

导航的时候完全不用手动加标签路径（比如'(index)/user/[id]'），Expo Router会自动识别当前的标签上下文，直接用普通路径就行：

// 不管在哪个标签页的页面里，都这么写
import { Link, useNavigation } from 'expo-router';

// 用Link组件跳转
<Link href={`/user/${userId}`}>查看用户详情</Link>

// 或者用useNavigation钩子跳转
const navigation = useNavigation();
navigation.navigate('user/[id]', { id: userId });

返回的时候直接用navigation.goBack()，会回到当前标签页的上一页，每个标签的历史记录是完全独立的，不会互相干扰。

四、数组语法的正确用法 #

你提到的'(index, search, post)/user/[id]'思路完全正确，但要注意这是文件夹名的写法，不是导航路径的写法：

1. 数组里的每个项要和你标签页的文件夹名完全一致（比如(index)、search）；
2. 之后如果要新增标签页（比如profile）共享这些路由，只需要把profile加到数组文件夹名里，改成(index,search,post,profile)就行，不需要改任何页面代码；
3. 每个标签页的专属路由（比如search/screenxy.tsx）和共享路由完全隔离，互不影响。

小验证技巧 #

配置完之后，你可以在user/[id]页面里用usePathname()钩子确认路径：

import { usePathname } from 'expo-router';

const pathname = usePathname();
console.log(pathname); 
// 从搜索标签跳过来会打印 /search/user/123
// 从首页标签跳过来会打印 /(index)/user/123

这样就能确认共享页面确实挂载到了对应的标签上下文里。

备注：内容来源于stack exchange，提问作者Alicia Sch.