4、构建与调试 Remix 应用全指南

构建与调试 Remix 应用全指南

1. Remix 应用基础组件与文件夹结构

1.1 Remix 内置组件

Remix 提供了一些内置组件，这些组件在构建应用时发挥着重要作用：
| 组件名称 | 功能描述 |
| — | — |
| Outlet | 用于指定子路由的渲染位置，替代了可能预期的 {children} 。 |
| ScrollRestoration | 管理所有客户端导航的滚动位置，模拟浏览器默认行为，在使用浏览器的后退和前进按钮时恢复滚动位置。 |
| Scripts | 将打包后的 Remix 应用的所有脚本标签添加到 HTML 文档中，移除该组件可移除应用中的所有客户端 JavaScript。 |
| LiveReload | 在开发过程中，当开发服务器检测到任何文件更改时触发页面重新加载，仅在开发环境中使用。 |

1.2 文件夹结构与路由

Remix 应用的 routes 文件夹包含所有其他路由，目前仅包含一个 _index 路由。 _index 路由是其父路由的默认子路由，共享相同的 URL，当前的 _index 路由映射到 / 路径。

Remix 充当编译器、路由器和运行时，它需要了解编译器配置、代码位置、所有路由模块以及应用的入口点，并将这些入口点暴露给服务器环境。大多数情况下，无需触碰这些入口点和配置文件，但必要时可以轻松更改其内容并插入应用逻辑。