在WebSphere部署React JS应用时的浏览器回退导航问题求助

一、解决浏览器回退跳转至根URL的问题 #

1. 配置React路由的basename #

React单页应用部署在子目录时，必须为路由设置basename，确保所有路由导航都基于子目录前缀。修改路由入口代码：

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

ReactDOM.render(
  <BrowserRouter basename="/frontend">
    {/* 你的路由组件 */}
  </BrowserRouter>,
  document.getElementById('root')
);

此配置会让所有路由路径自动带上/frontend前缀，回退时会在子目录内正确导航，不会跳转到WebSphere根URL。

2. 配置WebSphere的URL重写规则 #

React单页应用的非根路由（如/frontend/login）直接访问或回退时，WebSphere会默认尝试寻找对应物理文件，导致404。需要添加URL重写规则，将所有子目录下的非静态资源请求转发到前端入口文件：

• 登录WebSphere管理控制台，找到部署的前端应用
• 进入URL Rewrite配置页面，添加以下规则：
  • 匹配模式：^/frontend/(?!.*\.(js|css|png|jpg|svg|ico)$).*$
  • 重写目标：/frontend/index.html
  • 规则类型：Rewrite
    该规则会忽略静态资源请求，将其他所有/frontend下的请求转发到index.html，由React路由处理导航。

3. 检查登出逻辑的路由历史处理 #

如果登出时调用了history.replace()或清除了路由历史，可能导致回退时无有效历史记录而跳转到根URL。确保登出逻辑仅做重定向，不强制清除历史：

// 正确的登出重定向示例
const handleLogout = () => {
  // 清除登录状态
  localStorage.removeItem('token');
  // 重定向到登录页（而非根URL）
  navigate('/login');
};

如果业务要求登出后必须回到根URL，可在根URL配置一个跳转页面，自动重定向到/frontend/login，避免404。

二、更优部署方案对比 #

方案1：WebSphere独立部署前端 + 远程Spring Boot后端（当前方案优化） #

优点：前后端解耦，更新、扩容独立；后端可单独做负载均衡。
优化配置：

• 配置WebSphere反向代理，将前端的API请求转发到后端：
  在WebSphere中添加代理规则，将/api/*路径转发到Spring Boot后端地址（如http://backend-ip:backend-port/api/*），前端直接用相对路径/api/xxx请求，避免跨域问题。
• 前端通过环境变量配置API前缀，比如在.env文件中设置：

  REACT_APP_API_URL=/api
  

方案2：前后端打包为单个Spring Boot Jar包 #

优点：部署简单，单文件交付；无需额外配置WebSphere路由，Spring Boot可直接处理前端静态资源和路由重写。
实现步骤：

1. 构建React前端，将产物（build目录下的文件）复制到Spring Boot项目的src/main/resources/static/frontend目录。
2. 在Spring Boot中配置路由重写，添加WebMvcConfigurer：

   @Configuration
   public class WebConfig implements WebMvcConfigurer {
       @Override
       public void addViewControllers(ViewControllerRegistry registry) {
           // 所有/frontend下的非静态资源请求转发到index.html
           registry.addViewController("/frontend/**")
                   .setViewName("forward:/frontend/index.html");
       }
   }
   

3. 打包Jar包后直接部署，访问1.1.1.1:port/frontend即可访问前端，后端接口用/api等前缀区分。

缺点：前后端耦合，更新需重新打包整个应用；扩容时需同时部署前后端。

内容的提问来源于stack exchange，提问作者Marie-Lyne Roustom