Full Stack Foundations 路由规范深度解析remix-flat-routes 文件约定规则与 npx remix routes 实用技巧【免费下载链接】full-stack-foundationsLearn the foundational skills of building full stack web applications.项目地址: https://gitcode.com/gh_mirrors/fu/full-stack-foundationsFull Stack Foundations 是一个带你从零学习构建全栈 Web 应用的实战教学项目其练习应用基于 Remix 构建并采用remix-flat-routes 文件约定来管理路由。本文带你用 10 分钟吃透这套路由文件命名规则——、.、$、_这些特殊符号各自如何映射到 URL并掌握npx remix routes这条随时输出完整路由树的救命命令从此不再迷路。 为什么本项目选择 remix-flat-routesRemix 内置了基于文件系统的约定式路由你在app/routes目录下创建文件Remix 就自动为你生成路由无需手写任何路由配置。但 Remix 官方的约定在相关文件就近放置方面仍有局限。本项目因此选用了社区库remix-flat-routes它在 Remix v2 新约定的基础上让相关路由文件可以放进同一个文件夹长期维护时更清爽。这套约定已经在每个练习应用的 remix.config.js 中配置完成核心配置是通过routes字段调用flatRoutes(routes, defineRoutes)以编程方式生成路由同时用ignoredRouteFiles忽略了隐藏文件、.css文件、测试文件等避免它们被误认成路由理解整套路由只需抓住两个核心概念出自 exercises/02.routing/README.mdx概念含义Layout Nesting布局嵌套父路由的 UI 包裹子路由形成嵌套界面URL NestingURL 嵌套URL 路径层层深入如/users/kody/notes 一步查看完整路由树npx remix routes写路由文件最容易凭感觉而npx remix routes就是核对答案的标准工具。在任意练习目录Remix 项目根目录下运行npx remix routes它会以Routes嵌套结构打印出根据你当前文件系统实际生成的路由例如本项目文档中给出的大型应用示例节选自 exercises/02.routing/README.mdxRoutes Route fileroot.tsx Route path* fileroutes/$.tsx / Route pathusers/:username fileroutes/users/$username.tsx / Route pathusers/:username/notes fileroutes/users/$username_/notes.tsx Route path:noteId fileroutes/users/$username_/notes.$noteId.tsx / Route index fileroutes/users/$username_/notes.index.tsx / /Route /Route /Routes实用技巧官方文档原话——如果你迷路了随时在项目目录运行npx remix routes。改完任何路由文件后跑一次比反复刷新浏览器高效得多。 remix-flat-routes 文件约定规则速查下面结合项目中的真实文件逐一拆解 5 个特殊符号的用法。规则 1.点号——把文件名拆成 URL 段文件名中的.表示在 URL 中用/分隔这一段routes/users.kody.tsx→ URL 为/users/kody适合短路径。但文件多了之后长文件名难以阅读。规则 2加号——用文件夹分组路由的效果与.相同把前一段拆进 URL但允许你用文件夹代替超长文件名routes/users/kody.tsx→ URL 同样是/users/kody本项目在 exercises/02.routing/01.solution.routes/app/routes/users/kody.tsx 中选择了这种写法因为/users下会有多个路由用users/文件夹归类更清晰。规则 3$参数名——定义路由参数$前缀的段是动态参数匹配任意值。在 exercises/02.routing/03.solution.params/app/routes/ 目录下可以看到完整示例路由文件生成 URL说明users/$username.tsx/users/:username任意用户的主页users/$username_/notes.tsx/users/:username/notes该用户的笔记列表users/$username_/notes.$noteId.tsx/users/:username/notes/:noteId某一条笔记注意$username_/这种参数 下划线 加号的组合写法参数段本身是 URL 的一部分但它下面还要挂子路由文件夹_在这里起衔接作用。规则 4_下划线——布局路由不出现在 URL 中以_结尾或开头的段是布局路由它只提供 UI 外壳如左侧导航 Outlet /本身不产生 URL 段。项目文档示例中有两个典型写法路由文件生成 URL解读onboarding_.$provider.tsx/onboarding/:provideronboarding是布局路由$provider挂在它下面cache_.lru.$cacheKey.ts/admin/cache/lru/:cacheKeycache_结尾下划线cache段只做布局判定口诀看到_这一段的 URL 就隐身了只保留它的 UI 嵌套作用。规则 5index——索引路由index.tsx表示该目录的默认页。例如 exercises/02.routing/01.solution.routes/app/routes/users/kody_/notes.index.tsx 负责渲染/users/kody/notes本身而notes.tsx是包裹它的布局路由。 资源路由只跑代码不渲染 UI除了页面路由Remix 还支持资源路由resource routes只导出loader/action、不导出Component的路由模块专门用来返回数据如 JSON供fetch调用。本项目在 exercises/02.routing/04.solution.resources/app/routes/resources/healthcheck.tsx 中给出了示例——resources/目录对应 URL/resources/healthcheck但它不渲染任何界面只响应请求。这是后续做接口、预取数据练习05.scripting 章节的伏笔。✅ 新手避坑清单5 条经验帮你少踩坑别死记规则官方文档明确说不需要记住这套约定记不清就运行npx remix routes核对和.二选一同一个路由要么写users.kody.tsx要么写users/kody.tsx效果相同按文件量选布局路由要导出Outlet /父路由组件里必须渲染Outlet子路由才有挂载点参数用$不用::是 URL 里的写法文件名里必须写$username_只在需要嵌套 UI 时才用普通页面路由不要画蛇添足加下划线 项目中的相关练习路径想动手验证本文每条规则可以直接打开这些练习目录problem是题目solution是参考答案主题练习路径路由入门与嵌套exercises/02.routing/01.problem.routes/导航链接exercises/02.routing/02.problem.links/路由参数exercises/02.routing/03.problem.params/资源路由exercises/02.routing/04.problem.resources/路由章节完整说明exercises/02.routing/README.mdx每个目录内都有独立的remix.config.js内含flatRoutes配置、app/routes/路由文件可直接运行应用后对比 URL 与文件名的映射关系。写在最后remix-flat-routes 的文件约定本质上就一句话文件名即 URL特殊符号控制分隔、分组、参数、布局四种行为。配合npx remix routes这条路由快照命令你既能在几分钟内理解规则也能在大型项目中随时验证自己的路由结构是否正确——这正是 Full Stack Foundations 这套练习想传递给每个初学者的路由思维。【免费下载链接】full-stack-foundationsLearn the foundational skills of building full stack web applications.项目地址: https://gitcode.com/gh_mirrors/fu/full-stack-foundations创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考