Remix Run创建无嵌套路由/布局及自定义路由文件位置求助

要实现xx.com/blog这类完全独立、不继承root.tsx和首页布局、且从非routes文件夹加载的路由，可通过自定义路由配置+无根路由设置解决，具体步骤如下：

1. 修改 Remix 配置文件自定义路由映射 #

在remix.config.ts中，通过routes函数手动指定路由与组件文件的关联，同时设置parentRoute: null跳过全局根布局root.tsx：

// remix.config.ts
import { RoutesFunction } from "@remix-run/node";

export const routes: RoutesFunction = () => [
  // 保留原有首页路由（按需调整）
  {
    path: "/",
    file: "./routes/index.tsx",
  },
  // 配置独立的/blog路由
  {
    path: "/blog",
    file: "./standalone/blog.tsx", // 替换为你实际的非routes文件夹路径
    parentRoute: null, // 核心：禁用root.tsx的布局继承
  },
];

2. 创建独立的Blog页面组件 #

在你指定的非routes目录（比如app/standalone/）下创建blog.tsx，直接编写页面内容即可，无需嵌套任何布局组件：

// app/standalone/blog.tsx
export default function BlogPage() {
  return (
    <div>
      <h1>我的独立博客页面</h1>
      <p>该页面不继承root.tsx的导航、页脚，也和首页布局完全无关</p>
    </div>
  );
}

// 如需数据加载，可正常导出loader函数
export async function loader() {
  // 这里写你的数据获取逻辑
  return { posts: ["第一篇博客", "第二篇博客"] };
}

关键说明 #

• 之前尝试的点命名法（如root.blog.tsx）仍会继承root.tsx布局，因为root是全局根容器，只有通过parentRoute: null才能完全跳过它。
• 自定义路由配置可以完全绕过默认的routes文件夹路由规则，自由指定组件文件路径。

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