如何在Remix普通组件中使用loader？非路由组件如何获取数据？

1. 普通组件无法直接使用loader #

Remix的loader是路由级别的专属API，只能在路由组件（app/routes下的文件）中定义和使用，普通组件（比如app/components里的组件）没法直接声明自己的loader。

如果想让普通组件拿到服务端预取的数据，常见的做法是：

• 在父路由的loader里获取对应数据
• 把数据通过props传递给普通组件

如果需要普通组件自己动态获取数据，可以用Remix提供的useFetcher钩子，在客户端发起请求：

import { useFetcher } from "@remix-run/react";

function MyComponent() {
  const fetcher = useFetcher();
  
  useEffect(() => {
    fetcher.load("/api/data-endpoint");
  }, [fetcher]);

  if (fetcher.loading) return <div>加载中...</div>;
  if (fetcher.error) return <div>加载失败</div>;

  return <div>{fetcher.data?.content}</div>;
}

2. 路由外组件获取数据的两种方式 #

方式一：通过路由组件传递服务端预取数据 #

这是Remix推荐的服务端渲染场景下的做法：

• 在路由组件的loader中获取当前页面需要的数据
• 用useLoaderData()在路由组件中拿到数据，再通过props分发给所有子组件（包括路由外的普通组件）

方式二：客户端动态获取数据 #

如果数据不需要在首屏预取，或者是组件单独需要的非关键数据，可以用：

• useFetcher：发起无跳转的请求，调用路由的loader或者独立API，适合按需加载、表单提交等场景
• 直接使用fetch API：和普通React组件一样，在客户端发起请求，配合useEffect和状态管理处理数据

3. 是否要在路由中获取所有数据并分发？ #

不一定，得看具体场景：

• 推荐场景：如果是页面首屏必须的核心数据，或者多个组件共享的数据，在路由loader中统一获取后通过props分发是最优解——能减少服务端请求次数，保证首屏数据的一致性，还能利用Remix的服务端渲染能力。
• 不推荐场景：如果是某个组件单独需要的非核心数据（比如侧边栏的非关键统计信息），或者需要用户交互后才加载的数据，没必要在路由loader里提前获取，用useFetcher在组件内按需加载更合适，避免首屏加载过多冗余数据拖慢性能。

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