Redwood 实战教程：使用 `yarn redwood generate page` 创建第一个页面与路由

后端前端Web框架开发工具【免费下载链接】redwoodRedwoodGraphQL项目地址https://gitcode.com/gh_mirrors/re/redwood点击查看免费下载本篇文章基于 Redwood 官方教程第 4 版version-4.x第一章内容围绕yarn redwood generate page home /这一条命令完整讲解 Redwood 中页面Page的生成机制、Routes路由文件的自动更新、NotFoundPage兜底规则以及基础样式引入。你将掌握页面文件、测试文件、Storybook 文件如何被一次性生成路由如何被自动注入以及如何用一小段 CSS 让默认页面立即可读。文中所有代码与命令均以当前仓库gh_mirrors/re/redwood中实际存在的源码、模板与测试为佐证。为什么从第一个页面开始在完成 Redwood 项目初始化后浏览器打开的是官方欢迎页Welcome Page。本章的目标是让我们自己动手创建一个真实的页面替换掉这个欢迎页。Redwood 提供了命令行脚手架工具来替我们完成大部分重复劳动页面生成就是其中最典型的一个入口。先执行yarn redwood generate page home /这条命令做了四件事创建页面组件文件web/src/pages/HomePage/HomePage.{js,tsx}。Redwood 会把page后面的第一个参数做 PascalCase 处理再追加后缀Page来构造组件名例如home变成HomePage。创建配套的测试文件web/src/pages/HomePage/HomePage.test.{js,tsx}其中包含一个可以通过的冒烟测试组件能否正常渲染。创建配套的 Storybook 文件web/src/pages/HomePage/HomePage.stories.{js,tsx}用于在 Storybook 中独立开发和预览该组件。在web/src/Routes.{js,tsx}中新增一条Route把路径/映射到新的HomePage。执行完命令后页面其实已经在线了——浏览器会自动热更新。此时看到的还只是一个朴素的原生 HTML 页面但它已经是我们自己的页面了。打开文件、改几处文字、保存浏览器会立刻刷新出新内容。页面生成器的四个产物源码级拆解从源码看页面生成器位于 packages/cli/src/commands/generate/page/page.js它按照固定模板产出三个文件页面、测试、Storybook并单独处理路由注入COMPONENT_SUFFIX Page固定追加的组件名后缀REDWOOD_WEB_PATH_NAME pages页面统一存放在web/src/pages/下files()函数依次通过page.tsx.template、test.tsx.template、stories.tsx.template生成内容当路由带参数时Storybook 使用stories.tsx.parameters.template以便在故事中传入参数示例routes()函数构造Route path... page{XxxPage} namexxx /随后由addRoutesToRouterTask写回路由文件。生成后的页面模板 page.tsx.template 大致如下以 TypeScript 为例const HomePage () { return ( Metadata titleHome descriptionHome page / h1HomePage/h1 p Find me in codeweb/src/pages/HomePage/HomePage.tsx/code /p / ) } export default HomePage几个值得注意的实现细节模板顶部自动引入了Metadata组件redwoodjs/web用于设置页面标题与描述。生成器在收尾步骤还会输出一条提示提醒开发者Metadata对 SEO 的重要性。测试模板 test.tsx.template 使用redwoodjs/testing/web的render对页面做一次渲染断言渲染不抛错这是新页面的最低保障测试。测试与 Storybook 文件是否生成受命令行参数和项目配置双重控制。在 page.js 中可以看到当tests/stories未显式传入时会读取getConfig().generate.tests/getConfig().generate.stories即redwood.toml中的默认开关。如果你没有特别传参那么页面 测试 Storybook三件套默认都会生成——教程里那句 Youdowrite tests for your components, *dont you?? 就是 Redwood 脚手架默认行为的最佳注脚。路由文件的自动更新与页面自动导入打开web/src/Routes.{js,tsx}你会看到生成器写入的这条路由import { Router, Route } from redwoodjs/router const Routes () { return ( Router Route path/ page{HomePage} namehome / Route notfound page{NotFoundPage} / /Router ) } export default Routes注意我们在 Routes 文件中直接引用了HomePage但文件顶部并没有import HomePage from src/pages/HomePage/HomePage这样的语句。这是 Redwood 的刻意设计——Routes 文件会自动导入所有页面避免在路由文件顶部堆出长长一串 import 声明。从仓库中的 fixture 可以看到这一机制的实际效果packages/internal/src/tests/fixtures/nestedPages/web/src/Routes.js 中每个页面都有独立 import且支持非默认导出与重命名导入如import BazingaJobProfilePageWithFunnyName from src/pages/Jobs/JobProfilePage说明页面的自动发现与导入由 Redwood 内部工具链在构建/类型生成阶段完成。Route的三个关键属性属性含义示例path匹配的 URL 路径/、/hellopage渲染该路径的页面组件HomePagename路由的命名引用供routes.home()生成链接homepath与page是必填项。路由校验逻辑在 packages/router/src/route-validators.ts 的测试中体现得很清楚缺少path会抛出Route element for xxx is missing required props: path缺少page会抛出... is missing required props: page普通路由缺少name同样会报错。而notfound路由是特例它不需要path任何未匹配的 URL 都由它接管但必须有page。NotFoundPage 与 Splash Screen 的切换规则只要路由表中存在path/的路由Redwood 的初始欢迎页Splash Screen就再也不会出现。而NotFoundPage承担的是兜底职责当请求的 URL 匹配不到任何路由时Route notfound page{NotFoundPage} /会被渲染。在 packages/router/src/tests/analyzeRoutes.test.tsx 中路由分析结果会单独暴露NotFoundPage并被断言为有效的 React 元素说明兜底页是路由系统的第一等公民。动手验证把首页换成别的路径把路由改成Route path/hello page{HomePage} namehome /保存后访问 http://localhost:8910/根路径你会发现 Splash Screen 又出现了——因为此刻根路径下已经没有任何页面路由Redwood 在根路径展示了一个应用内路由列表列出当前应用所有可用的 URL。而访问/hello则能看到 HomePage 的内容。这个实验很好地说明了path与page的解耦关系页面组件不绑定路径路径只是路由表里的一行配置。做完实验记得把路径改回/否则后续章节的链接都会指向错误的地址。基础样式让默认页面不那么素之前的教程为了聚焦代码刻意不做任何样式但一个完全没有样式的站点实在影响观感。这里提供一份极简的基础样式表直接粘贴进web/src/index.cssbody { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; } ul { list-style-type: none; margin: 1rem 0; padding: 0; } li { display: inline-block; margin: 0 1rem 0 0 ; } h1 a { text-decoration: none; color: black; } button, input, label, textarea { display: block; outline: none; } label { margin-top: 1rem; } .error { color: red; } input.error, textarea.error { border: 1px solid red; } .form-error { color: red; background-color: lavenderblush; padding: 1rem; display: inline-block; } .form-error ul { list-style-type: disc; margin: 1rem; padding: 1rem; } .form-error li { display: list-item; } .flex-between { display: flex; justify-content: space-between; } .flex-between button { display: inline; }这段样式的效果是正文改用操作系统的系统字体-apple-system、Segoe UI、Roboto等元素之间保留适度留白列表去掉圆点并横向排列表单控件纵向堆叠同时预置了.error、.form-error等表单错误态类名——这些类名会在后续章节的表单与表单校验示例中直接复用。CSS 是建议性的你可以按喜好增删调整甚至完全忽略、继续使用浏览器默认样式。但需要知道的是本教程后续截图都是基于这份基础样式表渲染的如果改动较大界面观感可能与截图略有出入。小结至此你已经完成 Redwood 的第一个里程碑用一条generate page命令创建了页面组件、测试与 Storybook 文件理解了路由文件的自动注入与页面自动导入机制知道了NotFoundPage的兜底规则并为后续章节准备了基础样式。下一步可以顺着本教程继续深入路由与页面链接的使用routes.home()与Link、Storybook 与组件测试chapter5/storybook.md、以及 Redwood 的数据层Service 与 GraphQL。这些内容会建立在你已经拥有一个属于自己的首页这个前提之上。赞分享后端前端Web框架开发工具【免费下载链接】redwoodRedwoodGraphQL项目地址https://gitcode.com/gh_mirrors/re/redwood点击查看免费下载相关推荐Redwood 教程创建第二个页面与命名路由链接generate page 与 Link 实战Redwood 教程创建第二个页面与命名路由链接generate page 与 Link 实战 本篇教程承接 Redwood 全栈框架RedwoodG后端前端Web框架开发工具Redwood 教程用 generate page 创建第二个页面并通过 Link 与命名路由打通页面导航Redwood 教程用 generate page 创建第二个页面并通过 Link 与命名路由打通页面导航 本篇教程是 Redwood 官方教程第一章的延续后端前端Web框架开发工具Redwood 教程创建第二个页面与命名路由链接About 页面实战Redwood 教程创建第二个页面与命名路由链接About 页面实战 本篇技术指南来自 Redwood 官方教程第一章讲解如何用 redwood gen后端前端Web框架开发工具上一篇终极指南Apache Airflow监控告警体系构建完整的数据工作流监控解决方案下一篇Tilix高级功能揭秘同步输入、触发器与自动配置文件切换创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考