当前位置：首页 > article >正文

Remix 学习 - 路由模块（Route Module）

article 2024/11/16 22:29:16

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

1. Component

默认导出：每个路由模块通常会默认导出一个 React 组件。这是用于渲染该路由的页面。
```
export default function MyPage() {
  return <h1>Hello, Remix!</h1>;
}
```

2. Loader

数据加载：loader 函数用于在服务器端获取数据。它返回的数据可以在组件中使用。

  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 请求。

export async function action({ request }) {
  const formData = await request.formData();
  await saveData(formData);
  return redirect('/success');
}

路由 action 是服务器唯一功能，用于处理数据变化和其他操作。
如果对路由发出非 GET 请求（DELETE、PATCH、POST 或 PUT ），则在 loader 之前调用 action。

4. Meta

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

  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/deno
  
  export 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 错误，并提供错误信息。

  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。

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

8. Client Loader (`clientLoader`)

客户端数据加载：用于在客户端进行数据加载，适合在页面交互后需要动态更新的数据。
返回的数据用于客户端更新，不影响初始服务器端渲染。

可以提供更好的用户体验，因为它避免了不必要的页面刷新和服务器负载。

	export const clientLoader = async ({
	  request,
	  params,
	  serverLoader,
	}: ClientLoaderFunctionArgs) => {
	  // call the server loader
	  const serverData = await serverLoader();
	  // And/or fetch data on the client
	  const data = getDataFromClient();
	  // Return the data to expose through useLoaderData()
	  return data;
	};

9. Client Action (`clientAction`)

客户端表单处理：在客户端处理表单提交，用于无刷新提交，无需与服务器交互。

	export const clientAction = async ({
	  request,
	  params,
	  serverAction,
	}: ClientActionFunctionArgs) => {
	  invalidateClientSideCache();
	  const data = await serverAction();
	  return data;
	};

10. Handle

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

  // 在路由模块中
  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 头部信息。

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

12. HydrateFallback

加载占位符：用于在客户端渲染之前显示的占位内容。

 export async function clientLoader() {
   const data = await loadSavedGameOrPrepareNewGame();
   return data;
 }
 // Note clientLoader.hydrate is implied without a server loader
 
 export 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 以及客户端导航后，判断应重新加载哪些路由数据。

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