二十三、建一个 Remix 页面，正确工作流是什么

如果你现在要在系统里新增“到港清单”页面，标准流程很像修一条新航线：

#第一步：先定航线

想清楚 URL：

/arrivals
/arrivals/:arrivalId
/arrivals/:arrivalId/edit

#第二步：建泊位文件

app/routes/arrivals.tsx
app/routes/arrivals._index.tsx
app/routes/arrivals.$arrivalId.tsx
app/routes/arrivals.$arrivalId.edit.tsx

#第三步：写 loader

每个泊位先问：这一站需要读什么？

#第四步：写组件

把 useLoaderData() 当作当前站的货单。

#第五步：写 action

凡是写操作，都走提交流。

#第六步：优先用 <Form>

除非你明确知道这是局部旁路操作。

#第七步：加 pending UI

用户在等，港口就该亮灯。

#第八步：加 ErrorBoundary

别让一个泊位爆炸拖垮整个港。

#第九步：审视 URL 状态

筛选、分页、搜索，能上 URL 的尽量上 URL。

#第十步：最后才考虑额外客户端缓存

先把 Remix 自带调度系统用满。