Remix 学习 - 路由模块(Route Module)

embedded/2024/9/24 6:20:46/
webkit-tap-highlight-color: rgba(0, 0, 0, 0);">

在 Remix 中,每个路由模块(Route Module)都可以包含多个导出,用于处理不同的功能。以下是每个路由模块主要的导出内容:

1. Component

  • 默认导出:每个路由模块通常会默认导出一个 React 组件。这是用于渲染该路由的页面。

    export default function MyPage() {return <h1>Hello, Remix!</h1>;
    }
    

2. Loader

  • 数据加载loader 函数用于在服务器端获取数据。它返回的数据可以在组件中使用。
    javascript">  import { json } from "@remix-run/node";import { useLoaderData } from "@remix-run/react";export async function loader() {return json({ name: "Ryan", date: new Date() });}export default function SomeRoute() {const data = useLoaderData<typeof loader>();}
    
  • 此函数仅在服务器上运行。在初始服务器渲染时,它将向 HTML 文档提供数据。在浏览器中导航时,Remix 将通过fetch浏览器调用该函数。
  • 这意味着您可以直接与数据库对话,使用仅限服务器的 API 机密等。任何未用于呈现 UI 的代码都将从浏览器包中删除。

3. Action

  • 表单提交action 函数用于处理表单提交和其他 POST 请求。
    javascript">export async function action({ request }) {const formData = await request.formData();await saveData(formData);return redirect('/success');
    }
    
  • 路由 action 是服务器唯一功能,用于处理数据变化和其他操作。
  • 如果对路由发出非 GET 请求(DELETEPATCHPOSTPUT ),则在 loader 之前调用 action

4. Meta

  • 元数据meta 函数用于定义页面的元数据,如标题和描述。

    javascript">  export const meta: MetaFunction = () => {return [{ title: "Very cool app | Remix" },{property: "og:title",content: "Very cool app",},{name: "description",content: "This app is the best",},];};
    

    生成如下 HTML:

      <title>Very cool app | Remix</title><meta property="og:title" content="Very cool app" />;<meta name="description" content="This app is the best" />
    

5. Links

  • 样式和链接links 函数用于加载 CSS 或链接其他资源。

      import type { LinksFunction } from "@remix-run/node"; // or cloudflare/denoexport const links: LinksFunction = () => {return [{rel: "icon",href: "/favicon.png",type: "image/png",},{rel: "stylesheet",href: "https://example.com/some/styles.css",},{ page: "/users/123" },{rel: "preload",href: "/images/banner.jpg",as: "image",},];};
    

6. ErrorBoundary

  • 错误处理:用于捕获未处理的 JavaScript 错误,并提供错误信息。

    javascript">  import { isRouteErrorResponse, useRouteError } from "@remix-run/react";export function ErrorBoundary() {const error = useRouteError();if (isRouteErrorResponse(error)) {return (<div><h1>{error.status} {error.statusText}</h1><p>{error.data}</p></div>);} else if (error instanceof Error) {return (<div><h1>Error</h1><p>{error.message}</p><p>The stack trace is:</p><pre>{error.stack}</pre></div>);} else {return <h1>Unknown Error</h1>;}}
    

7. CatchBoundary

  • 特定错误处理:用于处理特定 HTTP 错误,如 404。

    javascript">  export function CatchBoundary() {let caught = useCatch();return (<div><h1>Error {caught.status}</h1><p>{caught.statusText}</p></div>);}
    

8. Client Loader (clientLoader)

  • 客户端数据加载:用于在客户端进行数据加载,适合在页面交互后需要动态更新的数据。
  • 返回的数据用于客户端更新,不影响初始服务器端渲染。
  • 可以提供更好的用户体验,因为它避免了不必要的页面刷新和服务器负载。
    javascript">	export const clientLoader = async ({request,params,serverLoader,}: ClientLoaderFunctionArgs) => {// call the server loaderconst serverData = await serverLoader();// And/or fetch data on the clientconst data = getDataFromClient();// Return the data to expose through useLoaderData()return data;};

9. Client Action (clientAction)

  • 客户端表单处理:在客户端处理表单提交,用于无刷新提交,无需与服务器交互。
    javascript">	export const clientAction = async ({request,params,serverAction,}: ClientActionFunctionArgs) => {invalidateClientSideCache();const data = await serverAction();return data;};
    

10. Handle

  • 路由元数据:用于传递自定义数据或配置到路由模块,比如页面标题、描述等,供其他部分(如布局组件、文档组件)使用。

    javascript">  // 在路由模块中export let handle = {breadcrumb: 'Home',customData: { someKey: 'someValue' }};// 在其他地方使用 handle 数据export default function SomeRoute() {let data = useLoaderData();let handle = useRouteHandle();return (<div><h1>{handle.breadcrumb}</h1><p>{data.someData}</p></div>);}
    

11. Headers

  • 自定义头部:定义页面的 HTTP 头部信息。

    javascript">  import type { HeadersFunction } from "@remix-run/node"; // or cloudflare/denoexport const headers: HeadersFunction = ({actionHeaders,errorHeaders,loaderHeaders,parentHeaders,}) => ({"X-Stretchy-Pants": "its for fun","Cache-Control": "max-age=300, s-maxage=3600",});

12. HydrateFallback

  • 加载占位符:用于在客户端渲染之前显示的占位内容。
    javascript"> export async function clientLoader() {const data = await loadSavedGameOrPrepareNewGame();return data;}// Note clientLoader.hydrate is implied without a server loaderexport function HydrateFallback() {return <p>Loading Game...</p>;}export default function Component() {const data = useLoaderData<typeof clientLoader>();return <Game data={data} />;}
    

13. Should Revalidate (shouldRevalidate)

  • 重新验证:控制数据是否需要重新验证或刷新。

  • 此功能可让应用程序优化在 actions 以及客户端导航后,判断应重新加载哪些路由数据。

    javascript">  import type { ShouldRevalidateFunction } from "@remix-run/react";export const shouldRevalidate: ShouldRevalidateFunction = ({actionResult,currentParams,currentUrl,defaultShouldRevalidate,formAction,formData,formEncType,formMethod,nextParams,nextUrl,}) => {return true;};
    

每个路由模块可以根据需要导出这些功能,以支持页面的不同需求。通过这些导出,Remix 提供了灵活的方式来处理数据、错误和页面渲染。


http://www.ppmy.cn/embedded/111147.html

相关文章

【kafka-01】kafka安装和基本核心概念

一&#xff0c;kafka安装和基本核心概念 1&#xff0c;kafka的安装和运行 1.1 kafka下载和安装 下载地址&#xff0c;目前下载的版本是 Scala 2.12 - kafka_2.12-3.6.2.tgz (asc, sha512)&#xff0c;一定要下载二进制文件&#xff0c;不要下载源码 https://kafka.apache.o…

黑盒测试例题

答案&#xff1a;C 知识点&#xff1a; 黑盒测试&#xff1a; 等价类划分 确定无效与有效等价类 设计用例尽可能多的覆盖有效类 设计用例只覆盖一个无效类 边界值分析 处理边界情况时最容易出错 选取的测试数据应该恰好等于&#xff0c;稍小于或稍大于边界值 解析&#…

MySQL的DDL、DML、DQL

DDL DDL&#xff1a;数据定义语言 查询所有数据库&#xff1a;show databases; 查询当前数据库&#xff1a;show databases(); 使用数据库&#xff1a;use 数据库名; 创建数据库&#xff1a;create database [if not exists] 数据库名; 删除数据库&#xff1a;drop data…

浙大数据结构:04-树7 二叉搜索树的操作集

这道题答案都在PPT上&#xff0c;所以先学会再写的话并不难。 1、BinTree Insert( BinTree BST, ElementType X ) 递归实现&#xff0c;小就进左子树&#xff0c;大就进右子树。 为空就新建结点插入。 BinTree Insert( BinTree BST, ElementType X ) {if(!BST){BST(BinTree…

说真心话,在IT行业,项目经理不懂「敏捷管理」真混不下去!

根据PMI官方2015年的《职业脉搏调查》报告显示&#xff0c;高度敏捷、快速做出市场反应的组织与行动迟缓的组织相比&#xff0c;项目的成功率更高。 因此&#xff0c;在快速发展的IT行业中&#xff0c;项目经理如果能够具备快速迭代、灵活应对市场需求的“敏捷管理”思维会更吃…

Python(PyTorch和TensorFlow)图像分割卷积网络导图(生物医学)

&#x1f3af;要点 语义分割图像三层分割椭圆图像脑肿瘤图像分割动物图像分割皮肤病变分割多模态医学图像多尺度特征生物医学肖像多类和医学分割通用图像分割模板腹部胰腺图像分割分类注意力网络病灶边界分割气胸图像分割 Python生物医学图像卷积网络 该网络由收缩路径和扩…

html+css网页制作 旅游 厦门旅游网3个页面

htmlcss网页制作 旅游 厦门旅游网3个页面 网页作品代码简单&#xff0c;可使用任意HTML辑软件&#xff08;如&#xff1a;Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad 等任意html编辑软件进行运行及修改编辑等操作&#xff09;。 获取源码 1&#…

LINUX下载编译zlog

下载 Tags HardySimpson/zlog GitHub 解压编译 make 检查 $ ll src/libzlog.a -rw-rw-r-- 1 weiyu weiyu 745782 9月 9 19:17 src/libzlog.a