本文介绍使用 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）
