React Router 访问/info报Cannot GET /info错误的解决求助

核心问题原因 #

express-actuator默认会注册/info、/health等后端端点，当你通过React Router配置/info前端路由时，访问该路径的请求会被Express优先识别为后端API请求，若actuator未正确启用/info端点或路径匹配冲突，就会抛出Cannot GET /info的404错误。

解决方案 #

方案一：修改express-actuator的端点前缀（推荐） #

给actuator的所有端点添加统一前缀，避免与前端路由路径冲突：

在server.dev.js中修改actuator的初始化代码：

const actuator = require('express-actuator');
// 添加prefix参数，将actuator端点前缀设为/api/actuator
app.use(actuator({
  prefix: '/api/actuator'
}));

修改后，actuator的info端点会变为/api/actuator/info，不再占用前端的/info路径，此时访问http://localhost:3000/info会直接由React Router处理。

方案二：配置Express的Catch-All路由转发前端请求 #

如果不想修改actuator前缀，可调整Express中间件顺序，确保未匹配到后端API的请求都转发到前端的index.html，由React Router处理：

在server.dev.js中按以下顺序配置中间件：

const path = require('path');
const express = require('express');
const actuator = require('express-actuator');
const app = express();

// 1. 先配置actuator处理后端端点
app.use(actuator());

// 2. 配置静态文件服务（根据你的实际静态文件目录调整）
app.use(express.static(path.join(__dirname, 'public')));

// 3. 最后添加Catch-All路由，所有未匹配的GET请求返回index.html
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

这样，当访问/info时，若Express未匹配到对应的后端API，就会返回前端入口文件，React Router就能渲染对应的构建信息组件。

额外检查项 #

1. 确认React Router已正确配置/info路由：
   在App.tsx中：

import { Routes, Route } from 'react-router-dom';
import InfoComponent from './components/InfoComponent'; // 替换为你的组件路径

function App() {
  return (
    <Routes>
      {/* 其他路由配置 */}
      <Route path="/info" element={<InfoComponent />} />
    </Routes>
  );
}

export default App;

2. 检查webpack-dev-server代理配置：
   若webpack.dev.config.js中配置了代理，确保/info路径未被代理到后端：

module.exports = {
  // 其他配置
  devServer: {
    proxy: {
      // 仅代理/api开头的请求，避免影响前端路由
      '/api': {
        target: 'http://localhost:3001',
        changeOrigin: true
      }
    }
  }
};

内容的提问来源于stack exchange，提问作者RAKESH YEDLAPPALLI