Remix中创建共享App Header并在指定路由隐藏的最佳实践

针对你的需求，不用手动在每个路由里引入Header，也不需要创建多个_index.*.tsx布局文件，推荐两种最贴合Remix设计理念的方案，按需选择：

方案一：根布局全局控制Header显示（最简洁） #

利用Remix的root.tsx根布局（所有路由的父容器），结合useMatches()钩子判断当前路由，实现Header的条件渲染。这样所有路由自动继承根布局，无需额外导入：

步骤： #

1. 在root.tsx中引入Header组件，通过当前路由路径判断是否隐藏：

import { Outlet, useMatches } from "@remix-run/react";
import Header from "~/components/Header";

export default function Root() {
  const matches = useMatches();
  // 获取当前激活的路由路径
  const currentPath = matches[matches.length - 1].pathname;
  // 定义需要隐藏Header的路由列表
  const hideHeaderRoutes = ["/register", "/login"];
  const showHeader = !hideHeaderRoutes.includes(currentPath);

  return (
    <html lang="zh-CN">
      <head>
        {/* 全局meta、样式等 */}
      </head>
      <body>
        {/* 条件渲染Header */}
        {showHeader && <Header />}
        {/* Outlet渲染子路由内容，子路由可自定义各自布局 */}
        <Outlet />
      </body>
    </html>
  );
}

2. 子路由（如documents.tsx、panel.tsx）直接写自己的布局即可，无需关心Header：

// documents.tsx
export default function DocumentsPage() {
  return (
    <div className="documents-container">
      <h1>文档页面</h1>
      {/* 这里写你的自定义布局内容 */}
    </div>
  );
}

这种方案适合大部分路由需要Header，仅少数路由隐藏的场景，代码最精简，无需额外维护布局文件。

方案二：路由分组布局（适合路由分类场景） #

如果你的路由可以按「需要Header」和「不需要Header」分成两组，可以用Remix的布局路由（带下划线的路由文件）来实现分组：

步骤： #

1. 创建带下划线的布局路由_withHeader.tsx，用来包裹需要显示Header的路由：

import { Outlet } from "@remix-run/react";
import Header from "~/components/Header";

export default function WithHeaderLayout() {
  return (
    <>
      <Header />
      <Outlet /> {/* 渲染子路由内容 */}
    </>
  );
}

2. 调整路由文件结构，把需要Header的路由作为_withHeader的子路由：

routes/
  _withHeader.tsx          // 带Header的布局
  _withHeader.documents.tsx // /documents 路由
  _withHeader.panel.tsx     // /panel 路由
  register.tsx              // /register 路由（无Header）
  login.tsx                 // /login 路由（无Header）

3. 子路由（如_withHeader.documents.tsx）直接写页面内容即可，布局由_withHeader.tsx提供：

export default function DocumentsPage() {
  return <h1>文档页面</h1>;
}

这种方案适合路由有明确分组的场景，逻辑更清晰，后续新增同组路由时自动继承Header。

总结 #

• 若只是少数路由隐藏Header，优先选方案一，代码量最少，维护成本最低；
• 若路由存在明确的分组（如后台路由都需要Header， auth路由不需要），选方案二，符合Remix路由嵌套的设计思想。

内容的提问来源于stack exchange，提问作者Roland