Expo Router中对应react-router Outlet的等价组件是什么？

嘿，刚好我之前研究过这个！在Expo Router里，和react-router的<Outlet>功能完全对应的组件是<Slot />哦～

你应该清楚，react-router里的<Outlet>是用来在父路由组件里渲染匹配到的子路由内容，还能保证子路由可以顺畅拿到父路由处理好的上下文数据（比如你示例里的User对象）。Expo Router的<Slot />干的就是一模一样的事儿，而且完美适配它的文件系统路由规则。

举个例子，把你那段react-router的权限路由逻辑改成Expo Router的写法，大概是这样：

import { Slot, useRouter } from 'expo-router';
import { useUser } from '../hooks/useUser'; // 假设你的自定义用户hook放在这里

export default function AuthenticatedLayout({ admin = false }: { admin?: boolean }) {
  const { data: user, isLoading } = useUser();
  const router = useRouter();

  if (isLoading) {
    return null; // 这里可以换成你自己的加载态组件
  }

  // 按需调整权限判断逻辑
  const isAuthorized = admin ? user?.role === "admin" : !!user;

  if (!isAuthorized) {
    // 权限不足时跳转到登录页
    router.replace('/login');
    return null;
  }

  // 授权通过，渲染子路由内容，这就对应react-router里return <Outlet />的逻辑
  return <Slot />;
}

在Expo Router的文件系统路由规则里，你把这个组件命名为layout.tsx放在某个目录下（比如app/(authenticated)/layout.tsx），那这个目录下的所有子路由（比如app/(authenticated)/profile.tsx、app/(authenticated)/dashboard.tsx）的内容都会自动渲染在<Slot />的位置，而且子路由里调用useUser()也能拿到父路由里已经处理好的用户数据，和你原来react-router的体验完全一致～

内容来源于stack exchange