Wasp 页面与路由Pages Routes入门用 route 与 page 声明构建 React 应用导航【免费下载链接】waspThe batteries-included full-stack framework for the AI era. Develop JS/TS web apps (React, Node.js, and Prisma) using declarative code that abstracts away complex full-stack features like auth, background jobs, RPC, email sending, end-to-end type safety, single-command deployment, and more.项目地址: https://gitcode.com/GitHub_Trending/wa/wasp在 Wasp 中页面与路由的声明式配置是搭建 Web 应用导航骨架的核心。本文以 Wasp 0.17 版本文档 03-pages.md 为主线带你完整掌握route与page两种声明的写法、URL 动态参数:param的用法、如何用 React Router 的useParams读取参数以及如何通过类型安全的Link组件与routes对象构建可靠的页面跳转。读完本文你将能够独立为 Wasp 项目新增任意数量的页面并清理出适合继续开发的干净骨架。认识main.wasp中的 page 与 routemain.wasp是 Wasp 应用的定义文件整个文件就是一系列声明declaration的集合。其中与页面导航直接相关的有两种route描述页面在哪个 URL 路径path下可被访问并指定由哪个页面page来渲染page定义一个 Web 页面以及页面被加载时应渲染的 React 组件。使用wasp new TodoApp -t minimal创建的新项目其默认的main.wasp文件中就自带一对route与page声明JavaScript 与 TypeScript 版本的差异仅在于组件文件扩展名.jsx/.tsxroute RootRoute { path: /, to: MainPage } page MainPage { // 指定页面的 React 实现从 src/MainPage.{jsx,tsx} 中导出。 // 该语句使用标准 JS import 语法。 // 使用 src 引用 src 文件夹内的文件。 component: import { MainPage } from src/MainPage }这两条声明合在一起的含义是当用户访问/时Wasp 渲染src/MainPage.{jsx,tsx}中导出的命名导出named export组件。你不需要编写任何路由注册、Routes包裹或BrowserRouter初始化代码——Wasp 会根据这些声明自动生成客户端路由逻辑。从仓库源码看route声明的语义在 web/docs/advanced/routing.md 中有更完整的阐述Wasp 底层使用React Router路由路径支持 React Router 的全部标准匹配模式参数段、可选段、splat 通配等。而 Wasp 0.17 的教程采用经典的.waspDSL 写法新版main.wasp.tsTS 配置则通过wasp.sh/spec的route()与page()函数表达同样的语义例如 examples/tutorials/TodoApp/main.wasp.ts 中的route(RootRoute, /, page(MainPage, { authRequired: true }))。两种写法的核心概念完全一致路径 页面组件。MainPage 组件一个普通的 React 函数组件被page声明引用的 React 组件本身没有任何 Wasp 魔法它就是一个普通的函数式组件import Logo from ./assets/logo.svg; import ./Main.css; export function MainPage() { // ... }组件同样可以像普通 React 项目一样导入 CSS 和静态资源如assets目录下的 logo。也就是说你只需要写这些代码就够了定义、构建、运行 Web 应用所需的其余一切都由 Wasp 负责处理。作为对照教程最终完成的 TodoApp 里examples/tutorials/TodoApp/src/MainPage.jsx 展示了页面组件如何进一步使用 Wasp 的能力通过wasp/client/operations导入useQuery与getTasks等操作来读取数据。这印证了页面组件就是标准 React 组件 Wasp 生成的能力这一设计理念。新增页面route page 声明与动态 URL 参数要添加更多页面只需再创建一组route与page声明。你甚至可以为 URL 路径添加参数语法与 React Router 完全一致——用:参数名声明动态段route HelloRoute { path: /hello/:name, to: HelloPage } page HelloPage { component: import { HelloPage } from src/HelloPage }当用户访问/hello/their-name时Wasp 渲染src/HelloPage.{jsx,tsx}导出的组件。在组件内部使用react-router-dom的useParamshook 读取name参数import { useParams } from react-router-dom export const HelloPage () { const { name } useParamsname() return divHeres {name}!/div }现在访问/hello/johnny页面就会显示 Heres johnny!。useParamsname中的泛型参数是 TypeScript 的参数名类型提示让解构出来的name拥有正确的字符串类型。从源码结构看web/docs/advanced/routing.md 还列举了更多 React Router 路径模式在 Wasp 中的用法可选段Optional Segments路径段后追加?使该段可选例如/photo/:photoId/edit?Splat 通配路径末尾使用/*匹配剩余任意段例如/files/*组件内通过useParams()解构*键获取匹配的剩余路径。这些模式在 Wasp 0.17 的route声明中同样适用参见 web/versioned_docs/version-0.17/advanced/links.md 中关于 splat 路由route CatchAllRoute { path: /pages/*, to: CatchAllPage }的示例。TypeScript 进阶类型安全的链接如果你使用 TypeScriptWasp 还提供了类型安全的导航能力避免手写 URL 字符串出错Link组件从wasp/client/router导入通过to指定路由路径、params传入参数编译期即可校验路径与参数是否匹配。例如对于path: /task/:id的路由import { Link } from wasp/client/router // Link to/task/:id params{{ id: task.id }}{task.description}/Linkroutes对象同样从wasp/client/router导入每个已声明的路由都会生成一个.build()函数import { routes } from wasp/client/router const linkToTask routes.TaskRoute.build({ params: { id: 1 } }) // → /task/1对于 splat 路由如/pages/*用params{{ *: about }}生成/pages/about对于含可选静态段的路由如/task/:id/details?则需在build或Link的to中明确选择包含或不包含可选段的路径。Link还支持search如{ sortBy: date }→?sortBydate与hash如#comments属性用于构造带查询串与锚点的链接。完整 API 与参数类型可查看 web/versioned_docs/version-0.17/advanced/links.md。清理脚手架为 TodoApp 准备干净的骨架在开始实现 Todo 应用的核心功能之前先把 starter 项目清理干净。第一步将MainPage组件的代码缩减为最小可渲染内容export const MainPage () { return divHello world!/div }此时主页面应当如下图所示第二步删除不再需要的文件src/Main.css、src/assets/logo.svg以及src/HelloPage.{jsx,tsx}教程后续不再需要这个页面。第三步由于src/HelloPage.{jsx,tsx}已不存在同步从main.wasp中移除它对应的route与page声明。清理后的main.wasp应如下app TodoApp { wasp: { version: {latestWaspVersion} }, title: TodoApp, head: [ link relicon href/favicon.ico /, ] } route RootRoute { path: /, to: MainPage } page MainPage { component: import { MainPage } from src/MainPage }这里有几个值得注意的细节app声明是 Wasp 项目的顶层配置wasp.version用于固定要使用的 Wasp 版本title用作浏览器标签页标题Wasp 中所有字符串必须使用双引号head数组可注入head中的 HTML 标签如 favicon清理的原则是文件与声明一一对应删除了组件文件就必须删除对应的route/page声明否则 Wasp 会因引用了不存在的组件而报错。完成以上清理后你已具备对 Wasp 页面与路由的基础认知可以开始实现 TodoApp 的核心功能了。小结本文围绕 Wasp 0.17 教程的 Pages Routes 章节梳理了从声明到实践的完整链路声明即导航route决定 URL 路径page决定渲染组件二者配对即可新增页面无需手写路由代码动态参数开箱即用:param路径段配合useParams即可读取 URL 参数且与 React Router 语法完全兼容可选段与 splat 模式同样支持TypeScript 类型安全Link组件与routes对象在编译期校验路径与参数search/hash让链接构建更灵活声明与文件保持同步增删页面时组件文件与main.wasp中的声明必须同步维护。下一步就可以基于这份干净的骨架按照教程继续实现 Entity、Query、Action 等核心功能可参考 examples/tutorials/TodoApp/main.wasp.ts 中query、action与page(MainPage, { authRequired: true })的完整写法。【免费下载链接】waspThe batteries-included full-stack framework for the AI era. Develop JS/TS web apps (React, Node.js, and Prisma) using declarative code that abstracts away complex full-stack features like auth, background jobs, RPC, email sending, end-to-end type safety, single-command deployment, and more.项目地址: https://gitcode.com/GitHub_Trending/wa/wasp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Wasp 页面与路由（Pages Routes）入门：用 route 与 page 声明构建 React 应用导航
Wasp 页面与路由Pages Routes入门用 route 与 page 声明构建 React 应用导航【免费下载链接】waspThe batteries-included full-stack framework for the AI era. Develop JS/TS web apps (React, Node.js, and Prisma) using declarative code that abstracts away complex full-stack features like auth, background jobs, RPC, email sending, end-to-end type safety, single-command deployment, and more.项目地址: https://gitcode.com/GitHub_Trending/wa/wasp在 Wasp 中页面与路由的声明式配置是搭建 Web 应用导航骨架的核心。本文以 Wasp 0.17 版本文档 03-pages.md 为主线带你完整掌握route与page两种声明的写法、URL 动态参数:param的用法、如何用 React Router 的useParams读取参数以及如何通过类型安全的Link组件与routes对象构建可靠的页面跳转。读完本文你将能够独立为 Wasp 项目新增任意数量的页面并清理出适合继续开发的干净骨架。认识main.wasp中的 page 与 routemain.wasp是 Wasp 应用的定义文件整个文件就是一系列声明declaration的集合。其中与页面导航直接相关的有两种route描述页面在哪个 URL 路径path下可被访问并指定由哪个页面page来渲染page定义一个 Web 页面以及页面被加载时应渲染的 React 组件。使用wasp new TodoApp -t minimal创建的新项目其默认的main.wasp文件中就自带一对route与page声明JavaScript 与 TypeScript 版本的差异仅在于组件文件扩展名.jsx/.tsxroute RootRoute { path: /, to: MainPage } page MainPage { // 指定页面的 React 实现从 src/MainPage.{jsx,tsx} 中导出。 // 该语句使用标准 JS import 语法。 // 使用 src 引用 src 文件夹内的文件。 component: import { MainPage } from src/MainPage }这两条声明合在一起的含义是当用户访问/时Wasp 渲染src/MainPage.{jsx,tsx}中导出的命名导出named export组件。你不需要编写任何路由注册、Routes包裹或BrowserRouter初始化代码——Wasp 会根据这些声明自动生成客户端路由逻辑。从仓库源码看route声明的语义在 web/docs/advanced/routing.md 中有更完整的阐述Wasp 底层使用React Router路由路径支持 React Router 的全部标准匹配模式参数段、可选段、splat 通配等。而 Wasp 0.17 的教程采用经典的.waspDSL 写法新版main.wasp.tsTS 配置则通过wasp.sh/spec的route()与page()函数表达同样的语义例如 examples/tutorials/TodoApp/main.wasp.ts 中的route(RootRoute, /, page(MainPage, { authRequired: true }))。两种写法的核心概念完全一致路径 页面组件。MainPage 组件一个普通的 React 函数组件被page声明引用的 React 组件本身没有任何 Wasp 魔法它就是一个普通的函数式组件import Logo from ./assets/logo.svg; import ./Main.css; export function MainPage() { // ... }组件同样可以像普通 React 项目一样导入 CSS 和静态资源如assets目录下的 logo。也就是说你只需要写这些代码就够了定义、构建、运行 Web 应用所需的其余一切都由 Wasp 负责处理。作为对照教程最终完成的 TodoApp 里examples/tutorials/TodoApp/src/MainPage.jsx 展示了页面组件如何进一步使用 Wasp 的能力通过wasp/client/operations导入useQuery与getTasks等操作来读取数据。这印证了页面组件就是标准 React 组件 Wasp 生成的能力这一设计理念。新增页面route page 声明与动态 URL 参数要添加更多页面只需再创建一组route与page声明。你甚至可以为 URL 路径添加参数语法与 React Router 完全一致——用:参数名声明动态段route HelloRoute { path: /hello/:name, to: HelloPage } page HelloPage { component: import { HelloPage } from src/HelloPage }当用户访问/hello/their-name时Wasp 渲染src/HelloPage.{jsx,tsx}导出的组件。在组件内部使用react-router-dom的useParamshook 读取name参数import { useParams } from react-router-dom export const HelloPage () { const { name } useParamsname() return divHeres {name}!/div }现在访问/hello/johnny页面就会显示 Heres johnny!。useParamsname中的泛型参数是 TypeScript 的参数名类型提示让解构出来的name拥有正确的字符串类型。从源码结构看web/docs/advanced/routing.md 还列举了更多 React Router 路径模式在 Wasp 中的用法可选段Optional Segments路径段后追加?使该段可选例如/photo/:photoId/edit?Splat 通配路径末尾使用/*匹配剩余任意段例如/files/*组件内通过useParams()解构*键获取匹配的剩余路径。这些模式在 Wasp 0.17 的route声明中同样适用参见 web/versioned_docs/version-0.17/advanced/links.md 中关于 splat 路由route CatchAllRoute { path: /pages/*, to: CatchAllPage }的示例。TypeScript 进阶类型安全的链接如果你使用 TypeScriptWasp 还提供了类型安全的导航能力避免手写 URL 字符串出错Link组件从wasp/client/router导入通过to指定路由路径、params传入参数编译期即可校验路径与参数是否匹配。例如对于path: /task/:id的路由import { Link } from wasp/client/router // Link to/task/:id params{{ id: task.id }}{task.description}/Linkroutes对象同样从wasp/client/router导入每个已声明的路由都会生成一个.build()函数import { routes } from wasp/client/router const linkToTask routes.TaskRoute.build({ params: { id: 1 } }) // → /task/1对于 splat 路由如/pages/*用params{{ *: about }}生成/pages/about对于含可选静态段的路由如/task/:id/details?则需在build或Link的to中明确选择包含或不包含可选段的路径。Link还支持search如{ sortBy: date }→?sortBydate与hash如#comments属性用于构造带查询串与锚点的链接。完整 API 与参数类型可查看 web/versioned_docs/version-0.17/advanced/links.md。清理脚手架为 TodoApp 准备干净的骨架在开始实现 Todo 应用的核心功能之前先把 starter 项目清理干净。第一步将MainPage组件的代码缩减为最小可渲染内容export const MainPage () { return divHello world!/div }此时主页面应当如下图所示第二步删除不再需要的文件src/Main.css、src/assets/logo.svg以及src/HelloPage.{jsx,tsx}教程后续不再需要这个页面。第三步由于src/HelloPage.{jsx,tsx}已不存在同步从main.wasp中移除它对应的route与page声明。清理后的main.wasp应如下app TodoApp { wasp: { version: {latestWaspVersion} }, title: TodoApp, head: [ link relicon href/favicon.ico /, ] } route RootRoute { path: /, to: MainPage } page MainPage { component: import { MainPage } from src/MainPage }这里有几个值得注意的细节app声明是 Wasp 项目的顶层配置wasp.version用于固定要使用的 Wasp 版本title用作浏览器标签页标题Wasp 中所有字符串必须使用双引号head数组可注入head中的 HTML 标签如 favicon清理的原则是文件与声明一一对应删除了组件文件就必须删除对应的route/page声明否则 Wasp 会因引用了不存在的组件而报错。完成以上清理后你已具备对 Wasp 页面与路由的基础认知可以开始实现 TodoApp 的核心功能了。小结本文围绕 Wasp 0.17 教程的 Pages Routes 章节梳理了从声明到实践的完整链路声明即导航route决定 URL 路径page决定渲染组件二者配对即可新增页面无需手写路由代码动态参数开箱即用:param路径段配合useParams即可读取 URL 参数且与 React Router 语法完全兼容可选段与 splat 模式同样支持TypeScript 类型安全Link组件与routes对象在编译期校验路径与参数search/hash让链接构建更灵活声明与文件保持同步增删页面时组件文件与main.wasp中的声明必须同步维护。下一步就可以基于这份干净的骨架按照教程继续实现 Entity、Query、Action 等核心功能可参考 examples/tutorials/TodoApp/main.wasp.ts 中query、action与page(MainPage, { authRequired: true })的完整写法。【免费下载链接】waspThe batteries-included full-stack framework for the AI era. Develop JS/TS web apps (React, Node.js, and Prisma) using declarative code that abstracts away complex full-stack features like auth, background jobs, RPC, email sending, end-to-end type safety, single-command deployment, and more.项目地址: https://gitcode.com/GitHub_Trending/wa/wasp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考