本文介绍使用 react router 与 context api 实现父子组件及跨路由页面间的数据传递，解决点击编辑按钮后 `row` 数据丢失的问题，确保 `editrecord` 页面能可靠获取原始记录。
在 react 应用中，当用户点击表格中的“编辑”按钮跳转到 /edit 页面时，若仅通过局部 useState 设置数据并立即导航（如 href 跳转），该状态将因组件卸载而丢失——这正是你遇到 record props 消失的根本原因。关键在于：状态需提升至路由级共享作用域，并配合声明式导航触发数据持久化。
✅ 正确做法：React Router + Context 管理跨页数据
1. 配置路由（app.js）
import { BrowserRouter as Router, switch, Route } from 'react-router-dom'; import ParentComponent from './ParentComponent'; import EditRecord from './EditRecord'; function App() { return ( ); } export default App;2. 创建全局数据上下文（RecordContext.js）
import React, { createContext, useState, useContext } from 'react'; const RecordContext = createContext(); export const RecordProvider = ({ children }) => { const [record, setRecord] = useState({}); return ( {children} ); }; export const useRecord = () => { const context = useContext(RecordContext); if (!context) throw new Error('useRecord must be used within RecordProvider'); return context; };3. 包裹根组件（index.js 或 Root.js）
import React from 'react'; import ReactDOM from 'react-dom/client'; import { RecordProvider } from './RecordContext'; import App from './App'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( );4. 父组件：点击时存数据 + 编程式导航（ParentComponent.js）
⚠️ 重要修正：移除 和内联 setRecord，改用 useHistory（v5）或 useNavigate（v6）
import React from 'react'; import { useNavigate } from 'react-router-dom'; // v6 写法（推荐） import { useRecord } from './RecordContext'; const ParentComponent = ({ data }) => { const navigate = useNavigate(); const { setRecord } = useRecord(); const handleEdit = (row) => { setRecord(row); // ✅ 存入全局上下文 navigate('/edit'); // ✅ 编程式导航，不触发页面刷新 }; return ( {data.map((row, index) => ( ))} ); }; export default ParentComponent;5. 子页面：从上下文读取数据（EditRecord.js）
import React from 'react'; import { useRecord } from './RecordContext'; const EditRecord = () => { const { record } = useRecord(); // ✅ 此处 record 始终为最新选中的行数据 if (!Object.keys(record).length) { return 未选择要编辑的记录，请返回列表页; } return ( 编辑记录
{json.stringify(record, null, 2)}
{/* 此处可接入表单、API 提交等逻辑 */} ); }; export default EditRecord;
⚠️ 注意事项与替代方案
- 不要用 href 跳转 + useState： 是硬跳转，会销毁当前组件实例，本地状态必然丢失。
- 避免 URL 参数传复杂对象：?id=123 适合简单 ID，但 row 若含嵌套结构或二进制数据，应走状态管理而非序列化到 URL。
- 进阶场景建议：
通过 Context + Router 的组合，你构建了一个轻量、可维护、符合 React 思想的跨页数据流，既规避了 prop-drilling，又保证了状态生命周期与路由一致。
相关文章
React Native 中实现键盘自动隐藏且不阻断子组件事件的正确方法
React 组件未重新渲染：解决数组对象属性变更后 UI 不更新的问题
React Context API 中异步获取数据并初始化状态的正确实践
React 组件不重新渲染：如何正确更新数组对象状态并触发重绘
如何在 React 标签页系统中持久化组件状态并实现“冻结”渲染
本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
墨墨背单词怎么删除之前选定的书
2026-02-04 16:53
如何在 pytest 测试函数中延迟初始化测试对象（而非在参数收集阶段）
2026-02-04 16:59
如何使用 Selenium 提取指定 div 中所有图片链接
2026-02-04 17:24
如何使用正则表达式提取带前后空格的域名字符串
2026-02-04 17:28
配音演员履历意外泄密！《异度神剑》2026年或有新作
2026-02-04 17:31
如何在 Pandas 中跨多个列高效匹配两个 DataFrame 的行组合
2026-02-04 17:35
如何根据用户选择的请假类型动态限制日期范围
2026-02-04 17:35
如何在 Go 中优雅地扩展 time.Time 类型并避免重复类型转换
2026-02-04 17:37
如何在 Go 中安全并发请求多个 URL（避免 EOF JSON 错误）
2026-02-04 17:38
skyworth万能遥控器如何使用
2026-02-04 17:38
热门AI工具
