关于react.js: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>
  );