根路由

“根”路由（app/root.tsx）是您的 Remix 应用程序中唯一必需的路由，因为它是 routes/ 目录中所有路由的父级，并且负责渲染根 <html> 文档。

除此之外，它主要与任何其他路由一样，并支持所有标准的路由导出

由于根路由管理您的文档，因此它是渲染 Remix 提供的一些“文档级别”组件的合适位置。这些组件在您的根路由中只能使用一次，它们包含 Remix 为了正确渲染页面而计算或构建的所有内容。

import type { LinksFunction } from "@remix-run/node"; // or cloudflare/deno
import {
  Links,
  LiveReload,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
} from "@remix-run/react";

import globalStylesheetUrl from "./global-styles.css";

export const links: LinksFunction = () => {
  return [{ rel: "stylesheet", href: globalStylesheetUrl }];
};

export default function App() {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1"
        />

        {/* All `meta` exports on all routes will render here */}
        <Meta />

        {/* All `link` exports on all routes will render here */}
        <Links />
      </head>
      <body>
        {/* Child routes render here */}
        <Outlet />

        {/* Manages scroll position for client-side transitions */}
        {/* If you use a nonce-based content security policy for scripts, you must provide the `nonce` prop. Otherwise, omit the nonce prop as shown here. */}
        <ScrollRestoration />

        {/* Script tags go here */}
        {/* If you use a nonce-based content security policy for scripts, you must provide the `nonce` prop. Otherwise, omit the nonce prop as shown here. */}
        <Scripts />

        {/* Sets up automatic reload when you change code */}
        {/* and only does anything during development */}
        {/* If you use a nonce-based content security policy for scripts, you must provide the `nonce` prop. Otherwise, omit the nonce prop as shown here. */}
        <LiveReload />
      </body>
    </html>
  );
}

Layout 导出

由于根路由管理所有路由的文档，它也支持一个额外的可选 Layout 导出。您可以在这个 RFC 中阅读详细信息，但 layout 路由有两个用途

避免在根组件、HydrateFallback 和 ErrorBoundary 中重复文档/"应用程序外壳"
避免在根组件/HydrateFallback/ErrorBoundary 之间切换时，React 重新挂载您的应用程序外壳元素，这可能会导致 FOUC（未样式内容的闪烁），如果 React 从您的 <Links> 组件中删除并重新添加 <link rel="stylesheet"> 标签。

import {
  Links,
  LiveReload,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
} from "@remix-run/react";

export function Layout({ children }) {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1"
        />
        <Meta />
        <Links />
      </head>
      <body>
        {/* children will be the root Component, ErrorBoundary, or HydrateFallback */}
        {children}
        <Scripts />
        <ScrollRestoration />
        <LiveReload />
      </body>
    </html>
  );
}

export default function App() {
  return <Outlet />;
}

export function ErrorBoundary() {
  const error = useRouteError();

  if (isRouteErrorResponse(error)) {
    return (
      <>
        <h1>
          {error.status} {error.statusText}
        </h1>
        <p>{error.data}</p>
      </>
    );
  }

  return (
    <>
      <h1>Error!</h1>
      <p>{error?.message ?? "Unknown error"}</p>
    </>
  );
}

关于 Layout 组件中的 useLoaderData 的说明

不允许在 ErrorBoundary 组件中使用 useLoaderData，因为它用于正常路径路由渲染，并且其类型具有内置的假设，即 loader 成功运行并返回了某些内容。该假设在 ErrorBoundary 中不成立，因为它可能是 loader 抛出并触发了边界！为了在 ErrorBoundary 中访问加载器数据，您可以使用 useRouteLoaderData，它会考虑加载器数据可能为 undefined 的情况。

由于您的 Layout 组件在成功和错误流程中都会使用，因此也存在相同的限制。如果您需要在 Layout 中根据请求是否成功来分支逻辑，可以使用 useRouteLoaderData("root") 和 useRouteError()。

由于您的 <Layout> 组件用于渲染 ErrorBoundary，您应该非常谨慎以确保您可以渲染 ErrorBoundary 而不会遇到任何渲染错误。如果您的 Layout 在尝试渲染边界时抛出另一个错误，则无法使用它，并且您的 UI 将回退到非常小的内置默认 ErrorBoundary。

export function Layout({
  children,
}: {
  children: React.ReactNode;
}) {
  const data = useRouteLoaderData("root");
  const error = useRouteError();

  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1"
        />
        <Meta />
        <Links />
        <style
          dangerouslySetInnerHTML={{
            __html: `
              :root {
                --themeVar: ${
                  data?.themeVar || defaultThemeVar
                }
              }
            `,
          }}
        />
      </head>
      <body>
        {data ? (
          <Analytics token={data.analyticsToken} />
        ) : null}
        {children}
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
}

另请参阅