在 routes.ts 中引用的文件称为路由模块。
route("teams/:teamId", "./team.tsx"),
// route module ^^^^^^^^
路由模块是 React Router 框架特性的基础，它们定义了
本指南是对每个路由模块功能的快速概述。其余的入门指南将更详细地介绍这些功能。
default)路由模块中的 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，React Router 将自动为您生成这些 props。这些 props 包括
loaderData：从此路由模块中的 loader 函数返回的数据actionData：从此路由模块中的 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>
);
}
loader路由加载器在路由组件渲染之前为它们提供数据。它们仅在服务器端渲染或使用预渲染构建期间调用。
export async function loader() {
return { message: "Hello, world!" };
}
export default function MyRoute({ loaderData }) {
return <h1>{loaderData.message}</h1>;
}
另请参阅
clientLoader仅在浏览器中调用，路由客户端加载器除了路由加载器之外或代替路由加载器为路由组件提供数据。
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;
}
客户端加载器可以通过设置函数的 hydrate 属性来参与服务器渲染页面的初始页面加载 hydration
export async function clientLoader() {
// ...
}
clientLoader.hydrate = true as const;
通过使用 as const，TypeScript 将推断出 clientLoader.hydrate 的类型是 true 而不是 boolean。这样，React Router 可以根据 clientLoader.hydrate 的值派生 loaderData 的类型。
另请参阅
action路由 actions 允许服务器端数据突变，并在从 <Form>、useFetcher 和 useSubmit 调用时自动重新验证页面上的所有加载器数据。
// 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类似于路由 actions，但仅在浏览器中调用。
export async function clientAction({ serverAction }) {
fakeInvalidateClientSideCache();
// can still call the server action if needed
const data = await serverAction();
return data;
}
另请参阅
ErrorBoundary当其他路由模块 API 抛出错误时，路由模块 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在初始页面加载时，路由组件仅在客户端加载器完成后才渲染。如果导出 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} />;
}
headers路由 headers 定义在服务器端渲染时要随响应一起发送的 HTTP 标头。
export function headers() {
return {
"X-Stretchy-Pants": "its for fun",
"Cache-Control": "max-age=300, s-maxage=3600",
};
}
handle路由 handle 允许应用程序在 useMatches 中向路由匹配添加任何内容，以创建抽象（如面包屑等）。
export const handle = {
its: "all yours",
};
links路由 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",
},
];
}
所有路由 links 将被聚合并通过 <Links /> 组件渲染，通常在您的应用程序根目录中渲染
import { Links } from "react-router";
export default function Root() {
return (
<html>
<head>
<Links />
</head>
<body />
</html>
);
}
meta路由 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",
},
];
}
所有路由的 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;
}
下一步：渲染策略