RedwoodJS实战教程：创建第一个页面与基础路由配置-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00073/article/details/148375294

RedwoodJS实战教程：创建第一个页面与基础路由配置

redwood The App Framework for Startups 项目地址: https://gitcode.com/gh_mirrors/re/redwood

前言

RedwoodJS是一个全栈JavaScript框架，旨在简化现代Web应用的开发流程。本教程将带你完成在Redwood项目中创建第一个页面的全过程，并深入解析相关技术细节。

创建第一个页面

在Redwood中，我们可以使用内置的CLI工具快速生成页面。执行以下命令：

yarn redwood generate page home /

这个命令实际上完成了多项工作，让我们分解来看：

页面组件生成：在web/src/pages/HomePage/目录下创建了HomePage.{jsx,tsx}文件。Redwood会自动将你提供的名称转换为PascalCase并添加"Page"后缀，因此"home"变成了"HomePage"。
测试文件：同时生成了对应的测试文件HomePage.test.{jsx,tsx}，包含一个基础通过的测试用例。
Storybook支持：创建了HomePage.stories.{jsx,tsx}文件，用于组件可视化开发和文档。
路由配置：自动在路由文件中添加了指向新页面的路由规则。

路由系统解析

Redwood的路由系统基于@redwoodjs/router包构建。生成页面后，打开web/src/Routes.{jsx,tsx}文件，你会看到类似这样的结构：

import { Router, Route } from '@redwoodjs/router'

const Routes = () => {
  return (
    <Router>
      <Route path="/" page={HomePage} name="home" />
      <Route notfound page={NotFoundPage} />
    </Router>
  )
}

关键点说明：

path属性定义了URL路径
page属性指定要渲染的组件
name属性为路由提供唯一标识符，可用于编程式导航
notfound路由用于处理404情况

自动导入机制

Redwood采用了一个巧妙的自动导入机制。你可能注意到在路由文件中直接使用了HomePage组件而没有显式导入。这是因为Redwood会自动导入pages目录下的所有页面组件，避免了手动维护冗长的导入列表。

页面样式基础

虽然Redwood不强制使用特定样式方案，但我们可以添加基础CSS来改善视觉效果：

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
    Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
}
/* 更多样式规则... */

这些基础样式主要做了以下优化：