当前位置：首页 > news >正文

React 记账本项目实战：多页面路由、Context 全局

news 来源：原创 2025/9/9 18:50:41

在本文中，我们将分享一个使用 React 开发的「记账本」项目的实战经验。该项目通过 VS Code 完成，包含首页、添加记录页、编辑页等多个功能页面，采用了 React Router 实现路由导航，使用 Context API 管理全局的交易记录状态，并引入数据可视化组件呈现不同月份的支出情况。项目还拆分为多个可复用组件，如 Header、TransactionForm、TransactionList、Summary、ChartPanel、MonthSelector 等。接下来，我们将按照项目结构和功能模块，逐一讲解每项技术在项目中的实际应用和设计思路，突出实战经验与开发逻辑。

项目概览与技术栈说明

首先是项目的整体概览。这个记账本应用旨在提供一个简单直观的界面，让用户记录日常的收入和支出，并按月度查看财务状况。技术栈方面，我们使用了 React Hooks 来构建组件和管理状态，路由导航使用 React Router (v6)，全局状态通过 React 的 Context API 管理，数据可视化部分则集成了一款图表库（例如 Chart.js 或 Recharts）。项目采用组件化的架构，将功能拆解到多个小组件中，提高了代码的可读性和可维护性。下面列出项目的主要技术栈和功能点：

React 18 + Hooks： 函数组件配合 useState、useEffect、useContext 等 Hooks 管理状态和生命周期。
React Router： 实现多页面路由结构，包括首页、添加记录页、编辑记录页等，支持路由跳转和参数传递。
Context API： 管理全局的交易记录数据，在组件之间共享状态，避免繁琐的 props 逐层传递 (props drilling)。
数据可视化库： 使用如 Chart.js（通过 react-chartjs-2 包）或 Recharts 等，在 ChartPanel 组件中展示图表，直观对比不同月份的支出情况。
组件化设计： 项目拆分为多个可复用组件，如 Header 导航栏、TransactionForm 表单、TransactionList 列表、Summary 汇总栏、ChartPanel 图表面板、MonthSelector 月份选择器等，各组件各司其职，组合构成完整应用。

记账本应用首页界面：顶部显示当前选择月份和总收入/支出汇总，中部可切换“列表模式”和“图表模式”，列表模式下展示本月交易记录列表，每条记录可编辑或删除。

如上图所示，记账本首页包含了当前月份（例如“2018年08月”）的收入与支出汇总，主要区域可以切换为“列表模式”或“图表模式”。列表模式下，会显示该月的每一笔记录，包括描述、金额（正值表示收入，负值表示支出）、日期，以及编辑/删除操作按钮。用户可以点击“创建一条新的记账记录”按钮跳转到添加记录页。当用户切换到“图表模式”时，将看到本月收支的数据可视化图表。接下来，我们分别介绍各主要技术在实现这些功能时的应用方法和背后思路。

如何构建页面路由与动态导航（React Router）

为了管理多个视图和页面，我们使用了 React Router 来构建路由结构。这使应用看起来像有多个页面，实则在单页应用内通过切换路由组件来实现页面跳转。我们定义了如下路由：

/ 首页：展示当前月份的交易列表、汇总信息和图表概览。
/add 添加记录页：包含一个表单组件用于输入新的收入/支出记录。
/edit/:id 编辑记录页：与添加页类似的表单组件，但会根据 URL 参数加载指定记录的数据进行编辑。

在实现上，我们在应用入口使用 <BrowserRouter> 包裹整个应用，然后通过 <Routes> 定义各个 <Route>：

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import HomePage from './pages/HomePage';
import AddRecordPage from './pages/AddRecordPage';
import EditRecordPage from './pages/EditRecordPage';function App() {return (<BrowserRouter><Header />  {/* 公共导航栏组件 */}<Routes><Route path="/" element={<HomePage />} /><Route path="/add" element={<AddRecordPage />} /><Route path="/edit/:id" element={<EditRecordPage />} /></Routes></BrowserRouter>);
}

如上代码所示，我们将 Header 组件提取为公共部分，放在路由外层（这样 Header 会在每个页面顶部显示，例如包含应用标题和跳转按钮）。然后定义三条路由，对应首页、添加页和编辑页。其中编辑页使用了 :id 动态参数，占位表示要编辑的记录ID。React Router v6 的写法是使用 element={<Component/>} 来指定路由组件，并用 <Routes> 替代早期版本的 <Switch> 。通过这种配置，用户在浏览器地址栏访问 #/add 或点击导航链接跳转时，就会渲染相应的页面组件。

导航方式： 在应用中我们使用了两种导航触发方式：

声明式导航： 使用 <Link> 或 <NavLink> 组件。在 Header 导航栏中，我们提供一个“新增记录”按钮，使用 <Link to="/add">新增记录</Link> 实现点击跳转到添加页。对于编辑按钮，我们在 TransactionList 列表中每一项记录后面放置了一个编辑链接，例如 <Link to={/edit/${record.id}}><编辑图标/></Link>，这样用户点击某条记录的编辑图标即可跳转到 /edit/该记录id 对应的编辑页面。
编程式导航： 在某些情况下，我们需要在事件处理函数中进行导航，例如表单提交后自动返回首页。这时使用 React

项目概览与技术栈说明

如何构建页面路由与动态导航（React Router）

相关文章：