如何从无路径父路由传值至子路由并在loader中访问登录用户ID？

问题背景 #

已知嵌套路由并行运行，想从执行认证的无路径父路由（_app.jsx）向子路由传值，在子路由的loader中获取登录用户ID，当前目录结构：

_app.jsx           // 在此处执行认证
_app._index.jsx
_app.page1.jsx
_app.page2.jsx

可行方案 #

当然可以实现，核心是利用Remix的路由机制：无路径父路由（布局路由）的loader返回数据会自动向下传递给所有子路由，无需额外配置。具体操作分两步：

1. 在父路由_app.jsx的loader中返回用户ID
   既然已经在_app.jsx里处理认证，直接在它的loader里完成认证逻辑并返回用户ID：

   // _app.jsx
   export async function loader({ request }) {
     // 这里替换成你的实际认证逻辑，比如从session读取用户
     const user = await getCurrentUserFromSession(request);
     // 未登录则跳转到登录页，子路由不会执行
     if (!user) {
       return redirect("/login");
     }
     // 返回用户ID，子路由可直接获取
     return { userId: user.id };
   }
   

2. 在子路由的loader中获取父路由数据
   在子路由的loader里，通过parentLoaderData()方法获取父路由_app.jsx返回的数据，进而拿到用户ID：

   // _app.page1.jsx
   import { parentLoaderData } from "@remix-run/react";
   
   export async function loader() {
     // 获取父路由的loader返回值
     const parentData = await parentLoaderData();
     // 提取用户ID
     const userId = parentData.userId;
     // 后续可使用userId做业务操作，比如查询用户相关数据
     const userPosts = await fetchUserPosts(userId);
     return { userPosts };
   }
   

额外说明 #

• 父路由的loader会优先于子路由执行，所以子路由能稳定拿到认证后的用户数据，若父路由返回重定向，子路由的loader不会触发，天然实现权限控制。
• 如果你原本就用Remix Session存储用户信息，也可以直接在子路由loader里从Session取ID，但复用父路由的认证结果能避免重复执行认证逻辑，更高效。

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