Remix.run层级路由中如何实现Loader间数据共享？

你的思路核心是复用父路由加载的数据，这本身符合Remix的设计方向，但直接用Context实现行不通——因为Context是客户端React的上下文机制，而Loader是在服务器端独立运行的，服务器端Loader无法访问客户端Context。下面针对你的场景给出具体可行方案，以及最佳实践建议：

一、组件层面复用：通过Outlet传递上下文（推荐） #

父路由thing.tsx的Loader加载数据后，在组件中通过Outlet的context属性把数据传递给所有子路由，子路由组件可以用useOutletContext获取数据。

示例代码： #

// app/routes/thing.tsx
import { json, Outlet, useLoaderData } from "@remix-run/react";

// 父路由Loader加载共享数据
export async function loader() {
  const titleText = await fetch("https://api.example.com/title").then(res => res.text());
  return json({ titleText });
}

export default function ThingRoute() {
  const { titleText } = useLoaderData<typeof loader>();
  // 通过Outlet把数据传递给所有子路由
  return <Outlet context={{ titleText }} />;
}

// app/routes/thing/other.tsx
import { useOutletContext } from "@remix-run/react";
import Component from "./component";

export default function OtherRoute() {
  // 获取父路由传递的上下文数据
  const { titleText } = useOutletContext<{ titleText: string }>();
  // 可以把数据传递给子组件
  return (
    <div>
      <h1>{titleText}</h1>
      <Component titleText={titleText} />
    </div>
  );
}

// app/routes/thing/component.tsx
type Props = { titleText: string };

export default function Component({ titleText }: Props) {
  return <p>{titleText}</p>;
}

二、Loader层面复用：抽离共享加载逻辑 #

如果子路由的Loader本身也需要用到父路由的共享数据（比如子路由Loader要基于该数据做进一步请求），可以把父路由的加载逻辑抽成独立函数，子路由Loader直接调用这个函数，同时通过缓存避免重复请求。

示例代码： #

// app/utils/loaders.ts
// 抽离共享的加载逻辑
export async function getTitleText() {
  // 可以添加缓存逻辑，比如用Remix的cache或者服务器端内存缓存
  const cacheKey = "title-text";
  const cached = await caches.open("data-cache").then(c => c.match(cacheKey));
  if (cached) return cached.text();

  const titleText = await fetch("https://api.example.com/title").then(res => res.text());
  await caches.open("data-cache").then(c => c.put(cacheKey, new Response(titleText)));
  return titleText;
}

// app/routes/thing.tsx
import { json } from "@remix-run/react";
import { getTitleText } from "~/utils/loaders";

export async function loader() {
  const titleText = await getTitleText();
  return json({ titleText });
}

// app/routes/thing/other.tsx
import { json } from "@remix-run/react";
import { getTitleText } from "~/utils/loaders";

export async function loader() {
  // 子路由Loader直接调用共享函数获取数据
  const titleText = await getTitleText();
  // 基于共享数据做其他逻辑
  const otherData = await fetch(`https://api.example.com/other?title=${titleText}`).then(res => res.json());
  return json({ otherData, titleText });
}

三、组件层面备选：使用useMatches获取父路由数据 #

如果不想通过Outlet传递，也可以用useMatches获取所有匹配路由的Loader数据，找到父路由的匹配项后提取数据：

// app/routes/thing/other.tsx
import { useMatches } from "@remix-run/react";

export default function OtherRoute() {
  const matches = useMatches();
  // 找到pathname为/thing的父路由匹配项
  const thingRouteMatch = matches.find(match => match.pathname === "/thing");
  const titleText = thingRouteMatch?.data?.titleText;
  
  return <h1>{titleText}</h1>;
}

最佳实践总结 #

1. 组件层面复用优先用Outlet Context：这是Remix官方推荐的方式，逻辑清晰，符合路由嵌套的数据流设计。
2. Loader层面复用抽离共享函数+缓存：保证每个Loader的独立性，同时避免重复请求。
3. 避免试图在Loader间直接共享数据：Remix的Loader设计为独立执行，目的是保证每个路由可以单独渲染、独立部署，直接共享数据会破坏这种独立性。

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