配置nodemon实现老React项目开发自动重编译遇路由报错的问题咨询

嘿，我来帮你捋捋这个问题～你想要给这个老React项目配置nodemon，实现开发时修改代码自动触发重编译/服务重启，但修改start脚本后遇到了You should not use <withRouter(undefined) /> outside a <Router>的报错，怀疑项目和nodemon不兼容？其实不是项目不兼容，是你配置nodemon的方式没踩对点子，咱们一步步来解决：

先分析报错原因 #

你之前把start脚本改成"start": "nodemon build_server/server.js"，这里有两个核心问题：

• 没有关联源码编译流程：nodemon只是监测你指定的文件（这里是编译后的build_server/server.js），但你修改源码后，不会自动触发重新编译，等于nodemon跑的还是旧的编译代码，可能导致服务端渲染时路由组件的上下文缺失，触发报错。
• 环境变量缺失：原来的start:server:dev脚本会设置NODE_ENV=development，而你直接用nodemon启动时没加这个环境变量，可能导致代码逻辑走了错误的分支，引发路由相关的问题。

正确的nodemon配置步骤 #

我们需要把nodemon和项目的编译流程、开发环境变量绑定起来，同时配合客户端的热重载：

1. 修改服务端开发启动脚本

把原来的start:server:dev脚本，改成用nodemon监测服务端源码、自动触发编译后重启服务：

"start:server:dev": "cross-env NODE_ENV=development nodemon --watch server_src --exec 'yarn build:server && ts-node build_server/server.js'"

• --watch server_src：这里假设你的服务端源码在server_src目录下，你可以根据自己项目的实际源码路径调整这个监测目标；
• --exec 'yarn build:server && ts-node build_server/server.js'：意思是每次监测到文件变化时，先重新编译服务端代码，再启动编译后的服务。

2. 优化开发环境启动脚本

利用你已经安装的concurrently，让客户端热重载和服务端nodemon重启同时运行，修改start:dev脚本：

"start:dev": "concurrently \"yarn start:client\" \"yarn start:server:dev\""

这样开发时，客户端会用react-app-rewired start开启热重载，服务端会自动监测源码变化、重编译并重启，完全符合开发时的自动更新需求。

3. 保留原生产环境脚本

不要修改start和start:server脚本，这两个是生产环境用的，继续保持原来的配置即可。

额外排查点 #

如果按上面配置后还是有路由报错，那要检查服务端渲染的代码：

• 确保所有使用withRouter的组件，都被包裹在<Router>上下文里（服务端渲染一般用<StaticRouter>，客户端用<BrowserRouter>）；
• 确认服务端编译后的代码是最新的，没有缓存问题。

其实nodemon只是一个进程监控工具，和React项目本身没有兼容性问题，只要把它和项目的编译、环境配置正确绑定，就能正常工作啦～

备注：内容来源于stack exchange，提问作者Hunter91151