如何在Remix-flat-routes中为首页及营销路由共享相同Header

针对你的需求，无需重复编写Header组件，也不用全局挂载，通过Remix Flat Routes的**布局路由（Layout Routes）**就能实现不同路由组使用不同Header的效果，具体方案如下：

方案1：按文件夹分组+布局文件 #

这种方式适合路由结构清晰的场景，把同属一类的路由放在同一个文件夹下，通过文件夹内的_layout.tsx统一注入Header：

1. 改造根路由（root.tsx） #

根路由只保留最基础的页面结构，不添加任何Header，让所有子路由通过Outlet渲染：

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

export default function Root() {
  return (
    <html>
      <body>
        <Outlet />
      </body>
    </html>
  );
}

2. 创建首页路由组的布局 #

在routes目录下新建home文件夹，添加_layout.tsx作为该组的布局容器，引入你的首页Header并嵌套Outlet：

// app/routes/home/_layout.tsx
import { Outlet } from "@remix-run/react";
import HomeHeader from "~/components/HomeHeader"; // 你的首页Header组件

export default function HomeLayout() {
  return (
    <div className="home-layout">
      <HomeHeader />
      <Outlet /> {/* 渲染home文件夹下的所有子路由 */}
    </div>
  );
}

然后把首页路由（原_index文件夹内的路由）移到home文件夹下，命名为_index.tsx：

// app/routes/home/_index.tsx
export default function HomePage() {
  return <h1>首页内容</h1>;
}

3. 创建认证路由组的布局 #

同理，新建auth文件夹并添加_layout.tsx，注入认证Header：

// app/routes/auth/_layout.tsx
import { Outlet } from "@remix-run/react";
import AuthHeader from "~/components/AuthHeader"; // 你的认证Header组件

export default function AuthLayout() {
  return (
    <div className="auth-layout">
      <AuthHeader />
      <Outlet /> {/* 渲染auth文件夹下的所有子路由，如登录、注册 */}
    </div>
  );
}

认证相关路由（如登录页）直接放在auth文件夹下即可：

// app/routes/auth/login.tsx
export default function LoginPage() {
  return <h1>登录页面</h1>;
}

方案2：命名布局+路由指定 #

如果不想调整文件夹结构，也可以通过命名布局实现，让指定路由关联对应的Header布局：

1. 创建命名布局文件 #

在routes目录下创建__layout.home.tsx和__layout.auth.tsx，分别对应两种Header布局：

// app/routes/__layout.home.tsx
import { Outlet } from "@remix-run/react";
import HomeHeader from "~/components/HomeHeader";

export default function HomeLayout() {
  return (
    <div>
      <HomeHeader />
      <Outlet />
    </div>
  );
}

// app/routes/__layout.auth.tsx
import { Outlet } from "@remix-run/react";
import AuthHeader from "~/components/AuthHeader";

export default function AuthLayout() {
  return (
    <div>
      <AuthHeader />
      <Outlet />
    </div>
  );
}

2. 在路由中指定布局 #

在需要使用首页Header的路由（如首页_index.tsx）中，通过export const layout指定布局名称：

// app/routes/_index.tsx
export const layout = "home"; // 关联__layout.home.tsx

export default function HomePage() {
  return <h1>首页内容</h1>;
}

在认证类路由（如登录页）中指定auth布局：

// app/routes/login.tsx
export const layout = "auth"; // 关联__layout.auth.tsx

export default function LoginPage() {
  return <h1>登录页面</h1>;
}

效果说明 #

• 首页及home文件夹下的所有子路由，都会自动渲染首页Header；
• 认证类路由及auth文件夹下的子路由，都会渲染认证Header；
• 未关联任何布局的路由（如404页），只会渲染根路由的基础结构，无Header。

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