求助：K8S环境下React SPA的路由与子路径适配问题

核心方案：相对路径资源引用 + 动态路由基准 #

1. 配置打包工具输出相对路径资源 #

这是解决资源404的核心——让打包后的JS、CSS、静态资源全部以相对于index.html的路径引用，而非固定绝对路径。

• Webpack配置：修改webpack.config.js的output.publicPath为'./'

  module.exports = {
    // 其他配置保持不变
    output: {
      filename: 'static/js/[name].[contenthash].js',
      chunkFilename: 'static/js/[name].[contenthash].chunk.js',
      publicPath: './', // 重点设置为相对路径
      clean: true,
    },
  };
  

• Vite配置：修改vite.config.js的base为'./'

  import { defineConfig } from 'vite';
  import react from '@vitejs/plugin-react';
  
  export default defineConfig({
    base: './', // 重点设置为相对路径
    plugins: [react()],
    // 其他配置保持不变
  });
  

设置生效后，打包后的index.html里的资源引用会变成./static/js/xxx.js、./static/css/xxx.css，不管index.html部署在哪个子路径下，浏览器都会自动从当前目录查找资源，不会再去根目录请求。

2. 动态设置React Router的basename #

硬写固定basename不适用动态部署场景，需要在运行时自动获取当前部署的子路径作为路由基准：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';

// 动态计算当前应用的基准路径
const getAppBasename = () => {
  const currentUrl = new URL(window.location.href);
  const pathSegments = currentUrl.pathname.split('/').filter(seg => seg);
  
  // 可根据实际部署规则调整解析逻辑，这里默认取当前URL的完整子路径前缀
  return '/' + pathSegments.join('/');
};

function App() {
  const basename = getAppBasename();
  return (
    <Router basename={basename}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

export default App;

比如应用部署在https://xxx.com/app/v2下，basename会自动识别为/app/v2，路由跳转时会自动带上该前缀，避免跳错根路径。

3. 检查静态资源引用 #

确保代码中所有静态资源（图片、字体等）都使用相对路径：

• 组件内图片：import logo from './images/logo.png'
• CSS背景图：background-image: url('./bg.png')
• 禁止使用绝对路径（如/images/logo.png）

4. 容器内Web服务器配置（以Nginx为例） #

如果镜像用Nginx托管静态文件，添加以下配置支持单页路由，同时不影响相对路径资源加载：

server {
  listen 80;
  root /usr/share/nginx/html;
  index index.html;

  # 优先查找静态文件，找不到则回退到index.html（适配React Router单页路由）
  location / {
    try_files $uri $uri/ /index.html;
  }
}

这样用户访问任意路由都会加载index.html，由React Router处理路由逻辑，同时相对路径资源能正常加载。

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