逐文件迁移示例

The most complex file was A​pp.js<\/cite>. Original code:

import { Switch。Route,Redirect } from 'react-router-dom';






I asked Cursor:
 换成 React Router v6 写法。保留所有路由逻辑，NotFound 用 path= "*"
再看Result，
 import { Routes,Route,Navigate } from 'react-router-dom';
> }/>
> }/>
> }/>
 }/>
> }/>
;Pain point #1 – Navigate missing replace attribute: The AI omitted required `replace` flag causing browser back‑button anomalies.
Pain point #2 – History.replace conversion: I ran a global search for `history.replace` after migration and manually changed m to `navigate`.
Pain point #3 – withRouter removal: The legacy component still used `this.props.history`. Instead of rewriting whole component to a hook‑based function。I kept it as a class and wrapped it with a custom HOC that injects `navigate`. This conservative approach avoided risky refactors.

The whole router migration took roughly **4 hours**,far less than week I would have spent manually.

：Ant Design 3 → 5，最意外的一步 

Pain point： 样式程序明显改变导致页面视觉回归几乎不可避免；团队对 CSS‑in‑JS 不熟悉产生学习成本焦虑。

样式程序迁移 


A​ntd 3 使用 Less 全局变量和 `import 'antd/dist/antd.css'`；A​ntd 5 则基于 @ant-design/cssinjs，不再需要全局 CSS。说起来，删除全局导入后自定义 Less 变量全部失效。

I asked Cursor：“用 Antd 的 ConfigProvider + me 替代原来的 Less变量覆盖，主题色是 #1890ff”。Cursor generated:
 import { ConfigProvider } from 'antd';const me = {
说到token。{
colorPrimary: '#1890ff',borderRadius:8,},};
&l t App /& g t;，All components that previously relied on `@primary-color` now read token value via me context.

组件 API 大幅变更 


`Modal` 的 `visible` 改为 `open`；AI 扫描并自动替换了 **23** 个出现位置。

`DatePicker` 放弃 moment，用 dayjs 替代。AI 把两处 moment 用法转成 dayjs。

`Table.pagination.showSizeChanger` 默认值变化导致分页 UI 略有差异，需要手动调参。


耗时回顾


Total ~6 hours。老实说，



说到第四步。其他依赖连锁反应 


 react‑scripts 从 **3.x** 升到 **5.x** ：Webpack 配置不兼容。我让 Cursor 对比两个版本的 webpack.config.js diff 并手动合并关键 loader 配置。

 @testing-library/react 从 **11** 升到 **14** ：render 包装方式变化，需要在异步更新前后加 act。AI 帮我标记所有需要补 act 的 test 文件。

 Node.js version ：CRA 要求 Node>= **14**，原项目使用 Node **12**。自行修改 .nvmrc 并重新安装依赖。


AI 辅助升级的协作模式 


环节
AI负责
人工负责






风险评估
生成 Breaking Changes 清单与推荐顺序
审核是否遗漏关键包

代码批量替换
生成等价写法与 diff/t d>/t d>/t d>/tr>

错误解释与修复建议
/t d>/t d>/t d>

测试用例生成或 act 标记
/t d>/t d>

建立/部署分析
/t d>










The whole upgrade consumed roughly **15 hours** including review and regression testing. Pure manual effort would have easily exceeded **80 hours**.



五个最关键的踩坑教训 







若项目大量自定义 Less变量。请先在单页试点 token机制，再全量推进。/li>

如：
 git commit -m "chore: upgrade react to ^18"
git commit -m "refactor: migrate react‑router to v6"
git commit -m "chore: upgrade antd to ^5"
这样可以随时回滚到稳定状态。/ li>

在路由迁移阶段。我同时询问 ChatGPT 与 Cursor 关于 withRouter 替代方案，两者答案不同。说起来，我最终选择保守方案，避免大规模重构带来的不可预期风险。/ li>







最终 

This upgrade taught me that hardest part of modernizing legacy projects isn’t writing new code—it’s understanding ***** old code was written that way.
AI can rewrite syntax and swap APIs in seconds,but it can’t infer hidden business logic hidden behind a ``withRouter` or a custom lifecycle .
The accelerator is powerful。but you still have to keep both hands on wheel.

参考来源 

The model APIs mentioned can be obtained from /gpt108.com . Our production environment has been stable for **12 months**,this article serves purely as a technical case study.