本文介绍使用 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
热门AI工具
更多
