Remix 路由模块输出对象 loader

Remix loader 函数是一个获取当前页面页面数据的函数，经常与 useLoaderData 一起配合使用

当前 Remix 版本：1.15.0

主要内容

• 定义方式
• loader 与 useLoaderData 使用
• 返回值类型以及使用方法
• 参数/上下文
• 重定向
• 错误处理
• laoder 操作纯 api 输出数据使用

loader 函数定义

• Remix Route 中定义 loader 函数
• export 对外暴露
• 返回 json/defer/ new Response 实例等

经常与 ORM/ODM 进行交互，从数据库获取数据。

loader 函数配合 useLoaderData 一起使用

import { json } from "@remix-run/node"; // or cloudflare/deno

export const loader = async () => {
  return json({ ok: true });
};
export default function Users() {
  const data = useLoaderData();
  return (
    <>{JSON.stringly(data)}</>
  );
}

loader 函数返回值

• json 一般是同步数据，json 函数可以指定两个参数，第一个是 目标数据，第二个是 http 状态

export const loader = () => {
  json({jsonKey: "jsonValue"})
}

export const loader = () => {
  json({jsonKey: "jsonValue"}, {
    status: 200,
    headers: {
      "Cache-Control": "no-store"
    }
  })
}

• defer 允许返回一个 promise, 一般配合 Await 组件使用

json 数据一般是返回一个同步 json 对象，但是 defer 允许我们返回值可以是一个 promise

import { defer } from "@remix-run/node"; // or cloudflare/deno

export const loader = async () => {
  const thePromise = loadSlowDataAsync(); // 产生一个 Promise 值

  // So you can write this without awaiting the promise:
  return defer({
    critical: "data",
    slowPromise: thePromise, // 直接将 Promise 的值交给 defer
  });
};

值得注意的是 defer 返回的值不直接使用，需要配合 Suspense + Await 组件使用, 下面是一个 loader 返回 defer 的示例：

import { defer } from "@remix-run/node";
import { Await, useLoaderData } from "@remix-run/react";
import { Suspense } from "react";

export const loader = () => {
  let p = new Promise((resolve) => {
    setTimeout(() => {
      resolve("defer a promise value");
    }, 2000);
  });
  return defer({
    pv: p,
  });
};

export default function Defer() {
  const data = useLoaderData();
  console.log(data);
  return (
    <div>
      <div>This is defer value: </div>
      <Suspense fallback={<div>Loading...</div>}>
        <Await resolve={data.pv}>{(data) => <div>{data}</div>}</Await>
      </Suspense>
    </div>
  );