在 routes.ts 中引用的文件被称为 Route Modules。
route("teams/:teamId", "./team.tsx"),
// route module ^^^^^^^^
Route modules 是 React Router 框架功能的基础，它们定义了
本指南快速概述了每个 Route module 功能。入门指南的其余部分将更详细地介绍这些功能。
default)Route module 中的 default 导出定义了当路由匹配时将渲染的组件。
export default function MyRouteComponent() {
return (
<div>
<h1>Look ma!</h1>
<p>
I'm still using React Router after like 10 years.
</p>
</div>
);
}
当组件渲染时，它会被提供 Route.ComponentProps 中定义的 props，这些 props 是 React Router 为你自动生成的。这些 props 包括
loaderData：从该 Route module 中的 loader 函数返回的数据actionData：从该 Route module 中的 action 函数返回的数据params：包含路由参数的对象（如果有）。matches：当前路由树中所有匹配项的数组。你可以使用这些 props 代替像 useLoaderData 或 useParams 这样的 hooks。这可能更可取，因为它们将为路由自动正确地进行类型推断。
import type { Route } from "./+types/route-name";
export default function MyRouteComponent({
loaderData,
actionData,
params,
matches,
}: Route.ComponentProps) {
return (
<div>
<h1>Welcome to My Route with Props!</h1>
<p>Loader Data: {JSON.stringify(loaderData)}</p>
<p>Action Data: {JSON.stringify(actionData)}</p>
<p>Route Parameters: {JSON.stringify(params)}</p>
<p>Matched Routes: {JSON.stringify(matches)}</p>
</div>
);
}
loaderRoute loaders 在路由组件渲染之前为其提供数据。它们只在服务器渲染时或构建时进行预渲染时在服务器端被调用。
export async function loader() {
return { message: "Hello, world!" };
}
export default function MyRoute({ loaderData }) {
return <h1>{loaderData.message}</h1>;
}
另请参阅
clientLoaderRoute client loaders 仅在浏览器中调用，它们提供数据给路由组件，可以补充或替代 Route loaders。
export async function clientLoader({ serverLoader }) {
// 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;
}
Client loaders 可以通过在函数上设置 hydrate 属性来参与服务器渲染页面的初始页面加载 Hydration。
export async function clientLoader() {
// ...
}
clientLoader.hydrate = true as const;
通过使用 as const，TypeScript 将推断 clientLoader.hydrate 的类型是 true 而不是 boolean。这样，React Router 就可以根据 clientLoader.hydrate 的值来推导 loaderData 的类型。
另请参阅
actionRoute actions 允许进行服务器端数据修改，当从 <Form>、useFetcher 和 useSubmit 调用时，会自动重新验证页面上的所有 loader 数据。
// route("/list", "./list.tsx")
import { Form } from "react-router";
import { TodoList } from "~/components/TodoList";
// this data will be loaded after the action completes...
export async function loader() {
const items = await fakeDb.getItems();
return { items };
}
// ...so that the list here is updated automatically
export default function Items({ loaderData }) {
return (
<div>
<List items={loaderData.items} />
<Form method="post" navigate={false} action="/list">
<input type="text" name="title" />
<button type="submit">Create Todo</button>
</Form>
</div>
);
}
export async function action({ request }) {
const data = await request.formData();
const todo = await fakeDb.addItem({
title: data.get("title"),
});
return { ok: true };
}
clientAction类似于 Route actions，但仅在浏览器中调用。
export async function clientAction({ serverAction }) {
fakeInvalidateClientSideCache();
// can still call the server action if needed
const data = await serverAction();
return data;
}
另请参阅
ErrorBoundary当其他 Route module API 抛出错误时，将渲染 Route module 的 ErrorBoundary，而不是路由组件。
import {
isRouteErrorResponse,
useRouteError,
} from "react-router";
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>;
}
}
HydrateFallback在初始页面加载时，路由组件只在 Client loader 完成后才渲染。如果导出，则可以立即渲染 HydrateFallback 来替代路由组件。
export async function clientLoader() {
const data = await fakeLoadLocalGameData();
return data;
}
export function HydrateFallback() {
return <p>Loading Game...</p>;
}
export default function Component({ loaderData }) {
return <Game data={loaderData} />;
}
headersRoute headers 定义了在服务器渲染时要随响应发送的 HTTP headers。
export function headers() {
return {
"X-Stretchy-Pants": "its for fun",
"Cache-Control": "max-age=300, s-maxage=3600",
};
}
handleRoute handle 允许应用在 useMatches 中的路由匹配项添加任何内容，以创建抽象（如面包屑等）。
export const handle = {
its: "all yours",
};
linksRoute links 定义了要在文档的 <head> 中渲染的 <link> 元素。
export function links() {
return [
{
rel: "icon",
href: "/favicon.png",
type: "image/png",
},
{
rel: "stylesheet",
href: "https://example.com/some/styles.css",
},
{
rel: "preload",
href: "/images/banner.jpg",
as: "image",
},
];
}
所有 Route links 将被聚合并通过 <Links /> 组件渲染，该组件通常在你应用的根部渲染。
import { Links } from "react-router";
export default function Root() {
return (
<html>
<head>
<Links />
</head>
<body />
</html>
);
}
metaRoute meta 定义了要在文档的 <head> 中渲染的 meta 标签。
export function meta() {
return [
{ title: "Very cool app" },
{
property: "og:title",
content: "Very cool app",
},
{
name: "description",
content: "This app is the best",
},
];
}
所有 Route meta 将被聚合并通过 <Meta /> 组件渲染，该组件通常在你应用的根部渲染。
import { Meta } from "react-router";
export default function Root() {
return (
<html>
<head>
<Meta />
</head>
<body />
</html>
);
}
另请参阅
shouldRevalidate默认情况下，所有路由在 actions 之后都会重新验证。此函数允许路由对于不影响其数据的 actions 选择不进行重新验证。
import type { ShouldRevalidateFunctionArgs } from "react-router";
export function shouldRevalidate(
arg: ShouldRevalidateFunctionArgs
) {
return true;
}
下一篇：渲染策略