全书目录

第三十一篇：Remix 完全指南 —— Web 原生航运港宇宙

六、`root.tsx`：港务总控楼

1 分钟 188 字 第 569 / 962 个阅读单元

Remix 应用里唯一必需的路由，是 app/root.tsx。

它像整座港的总控楼，负责真正的 HTML 文档壳：

tsx
// app/root.tsx
import {
  Links,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
} from "@remix-run/react";

export default function App() {
  return (
    <html lang="zh-CN">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
        <Outlet />
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
}

这里几个东西必须记住：

  • Meta：收集各个路由导出的标题、描述等信息
  • Links：收集样式表和其他链接资源
  • Outlet：真正渲染当前子路由的位置
  • ScrollRestoration：处理前进后退滚动恢复
  • Scripts：把客户端脚本接上

你可以把它理解成：

text
root.tsx
├── 港口总文档
├── 统一的 <head>
├── 所有航线共用的外壳
└── 当前泊位停靠口：<Outlet />