React中获取等价于JSP request.getContextPath()的应用上下文路径方法

我刚好处理过类似的场景，给你几个实用的方案，都是在Tomcat/WebLogic这类服务器上验证过的：

方法一：利用HTML的<base>标签（推荐，动态适配） #

当你把React项目打包后部署到Java服务器时，可以在index.html中通过JSP语法动态设置<base>标签的href属性，这样React就能直接读取到上下文路径：

1. 修改打包后的index.html（或者在React项目的public/index.html中提前配置，注意如果用Create React App，打包时不会解析JSP语法，所以需要部署后手动修改或者通过服务器模板引擎渲染）：

<base href="<%=request.getContextPath()%>/"/>

2. 在React代码中，通过以下方式获取上下文路径：

function getContextPath() {
  const baseHref = document.querySelector('base').getAttribute('href');
  // 去掉末尾的斜杠，返回干净的上下文路径，比如"/my-app"
  return baseHref.replace(/\/$/, '');
}

这个方案的优势是完全动态适配服务器配置的上下文路径，不需要修改React代码或者重新构建。

方法二：从window.location解析 #

如果不想修改index.html，可以直接从当前URL的路径中提取上下文路径：

function getContextPath() {
  const pathname = window.location.pathname;
  // 分割路径，第一个非空的部分就是上下文路径
  const segments = pathname.split('/').filter(segment => segment.length > 0);
  return segments.length > 0 ? `/${segments[0]}` : '';
}

这个方法的好处是不需要依赖服务器的JSP渲染，但要注意如果你的React路由有多层嵌套，只要服务器配置的上下文路径是URL的第一级，就不会有问题。

方法三：构建时注入环境变量（适合固定上下文场景） #

如果你的应用上下文路径是固定的（比如客户明确要求用/my-app），可以在构建React项目时注入环境变量：

1. 在React项目根目录创建.env文件，添加：

REACT_APP_CONTEXT_PATH=/my-app

2. 在React代码中直接使用这个变量：

const CONTEXT_PATH = process.env.REACT_APP_CONTEXT_PATH || '';

注意：这个方案的缺点是如果上下文路径需要修改，必须重新构建项目，灵活性不如前两种。

额外提示：配合React Router使用 #

获取到上下文路径后，记得在React Router的路由组件中配置basename属性，避免路由跳转出错：

import { BrowserRouter } from 'react-router-dom';

function App() {
  const contextPath = getContextPath();
  return (
    <BrowserRouter basename={contextPath}>
      {/* 你的路由组件 */}
    </BrowserRouter>
  );
}

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