linkslinks 函数定义了当用户访问路由时，要添加到页面中的 <link> 元素。
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",
},
];
};
你可以返回两种类型的链接描述符
HtmlLinkDescriptor这是一个普通 <link {...props} /> 元素的表示对象。 查看 MDN 文档以了解链接 API。
路由的 links 导出应该返回一个 HtmlLinkDescriptor 对象数组。
示例
import type { LinksFunction } from "@remix-run/node"; // or cloudflare/deno
import stylesHref from "../styles/something.css";
export const links: LinksFunction = () => {
return [
// add a favicon
{
rel: "icon",
href: "/favicon.png",
type: "image/png",
},
// add an external stylesheet
{
rel: "stylesheet",
href: "https://example.com/some/styles.css",
crossOrigin: "anonymous",
},
// add a local stylesheet, remix will fingerprint the file name for
// production caching
{ rel: "stylesheet", href: stylesHref },
// prefetch an image into the browser cache that the user is likely to see
// as they interact with this page, perhaps they click a button to reveal in
// a summary/details element
{
rel: "prefetch",
as: "image",
href: "/img/bunny.jpg",
},
// only prefetch it if they're on a bigger screen
{
rel: "prefetch",
as: "image",
href: "/img/bunny.jpg",
media: "(min-width: 1000px)",
},
];
};
PageLinkDescriptor这些描述符允许你预取用户可能导航到的页面的资源。虽然这个 API 很有用，但你可能通过使用 <Link prefetch="render"> 获得更多好处。但如果你愿意，你可以通过这个 API 获得相同的行为。
export const links: LinksFunction = () => {
return [{ page: "/posts/public" }];
};
这会将 JavaScript 模块、加载器数据和样式表（在下一个路由的 links 导出中定义）加载到浏览器缓存中，甚至在用户导航到那里之前。
