如何让React Router排除特定路由，交由服务器直接处理？

1. 在React Router中添加排除路由的兜底处理 #

修改app.js的路由配置，新增兜底路由来检测并处理服务器渲染的路径，让浏览器触发硬导航交给后端处理：

import { Routes, Route, useLocation } from 'react-router-dom';

// 定义需要交给服务器处理的路由前缀
const SERVER_ROUTES = ['/dashboard', '/docs'];

// 兜底组件
function FallbackRoute() {
  const location = useLocation();
  
  // 判断当前路径是否属于服务器处理范围
  const isServerRoute = SERVER_ROUTES.some(prefix => 
    location.pathname.startsWith(prefix)
  );

  if (isServerRoute) {
    // 硬导航，让服务器接管请求
    window.location.href = location.pathname;
    return null;
  }

  // 其他未匹配路由显示404
  return <div>404 - 页面不存在</div>;
}

function App() {
  return (
    <Routes>
      {/* 修正路由参数写法：/items/:id 才是React Router的正确参数格式 */}
      <Route path="/items/:id" element={<Item />} />     
      <Route path="/" element={<ItemList />} />
      {/* 兜底路由，匹配所有未定义路径 */}
      <Route path="*" element={<FallbackRoute />} />
    </Routes>
  );
}

export default App;

2. 开发环境配置Vite代理 #

开发时Vite会接管所有请求，需要配置代理将服务器路由转发到后端服务，避免本地404。修改vite.config.js：

import { defineConfig } from "vite";
import { config } from "dotenv";
import react from "@vitejs/plugin-react";
config();

export default defineConfig({
  plugins: [react()],
  define: {
    "process.env": process.env,
  },
  server: {
    proxy: {
      // 代理/dashboard开头的请求到后端
      '/dashboard': {
        target: 'http://你的后端服务地址', // 例如http://localhost:8000
        changeOrigin: true,
        bypass: (req) => {
          // 如果是HTML请求，直接让后端返回对应页面
          if (req.headers.accept && req.headers.accept.includes('text/html')) {
            return '/dashboard';
          }
        }
      },
      // 同样代理/docs路由
      '/docs': {
        target: 'http://你的后端服务地址',
        changeOrigin: true,
        bypass: (req) => {
          if (req.headers.accept && req.headers.accept.includes('text/html')) {
            return '/docs';
          }
        }
      }
    }
  }
});

3. 生产环境服务器配置 #

确保生产服务器（如Nginx、Apache）区分处理SPA路由和服务器渲染路由：

• React SPA路由（/、/items/:id）返回SPA入口文件index.html
• /dashboard、/docs等路由直接返回后端渲染的页面或转发到后端服务

以Nginx为例，配置示例：

server {
  listen 80;
  server_name example.com;

  # 处理服务器渲染路由
  location /dashboard {
    proxy_pass http://你的后端服务地址;
    # 如果是静态页面，可替换为：
    # root /path/to/dashboard/static/files;
    # index index.html;
  }

  location /docs {
    proxy_pass http://你的后端服务地址;
    # root /path/to/docs/static/files;
    # index index.html;
  }

  # 处理React SPA路由
  location / {
    root /path/to/your/spa/build;
    try_files $uri $uri/ /index.html;
  }
}

配置完成后，访问/dashboard或/docs时会直接加载服务器渲染的页面，React应用不会介入处理；访问SPA路由则正常加载React应用。

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