新建React App切换路由时出现WebSocket连接失败错误求助

我刚创建了一个新的React App，每次导航到新路径时都会出现WebSocket连接失败的错误（错误截图：）。目前应用可正常运行，但我认为该错误会降低应用性能，希望得到解决办法。

以下是App.js中的全部路由代码：

import Home from './views/Home';
import {BrowserRouter, Route, Routes} from 'react-router-dom'
import Test from './views/Test';
import React from 'react';
import Register from './views/Register';
function App() {
return (
<div className="App">
  <BrowserRouter>
  <Routes>
    <Route path='/register' element={<Register />} />
    <Route path='/' element={<Home/>} />
    <Route path='/test' element={<Test />} />
  </Routes>
  </BrowserRouter>
 

</div>
 );
}

export default App;

解决办法 #

1. 排查开发服务器WebSocket连接问题 #

这个错误基本是React开发服务器的热重载WebSocket无法正常建立连接导致的，优先排查：

• 关闭VPN、代理工具等可能干扰网络的程序，重启开发服务器。
• 检查默认端口（3000）是否被占用，换个端口启动：

  PORT=3001 npm start
  

2. 临时禁用热重载 #

如果只是不想在开发阶段看到错误提示，可以修改启动命令关闭热重载：
打开package.json，修改scripts里的start命令：

"scripts": {
  "start": "FAST_REFRESH=false react-scripts start"
}

保存后重启开发服务器即可。

3. 重新安装依赖包 #

尝试更新或重装react-router-dom，确保版本稳定：

npm uninstall react-router-dom
npm install react-router-dom@latest

同时可以清理依赖缓存后重装所有依赖：

npm cache clean --force
rm -rf node_modules package-lock.json
npm install

4. 检查浏览器扩展 #

部分广告拦截器、代理类浏览器扩展会拦截WebSocket请求，尝试在浏览器隐身模式下打开应用，看错误是否消失，以此排查扩展干扰问题。

内容的提问来源于stack exchange，提问作者Tarek Gharbi