React-router v4.3.1生产环境Tomcat部署直接访问子路由跳转首页如何解决

这是BrowserRouter（BrowserHistory模式）的典型表现：

• 本地开发环境的React devServer默认开启了historyApiFallback: true，所有路径请求都会默认返回根目录的index.html，客户端JS加载完成后就能正常匹配路由
• 生产环境的Tomcat/Spring没有对应配置，你直接在地址栏输入/gui/users时，请求会先发送到后端，后端找不到对应路径的静态资源/接口，就触发了默认重定向到首页的逻辑，等客户端JS加载完成时，地址已经变成首页路径，路由自然无法匹配到用户页。

按照以下步骤依次配置即可解决：

1. 修正BrowserRouter的basename配置 #

你生产环境的访问前缀是/gui，但当前配置的basename是/，会导致路由前缀不匹配，先修改index.js的代码：

// 可根据环境变量动态设置basename，本地开发用/，生产用/gui
<BrowserRouter basename={process.env.NODE_ENV === 'production' ? '/gui' : '/'}>
    <App />
</BrowserRouter>

2. 配置后端路由fallback（二选一即可） #

方案A：Spring层面配置（推荐） #

新增WebMvc配置类，将所有/gui开头的前端路由请求转发到index.html：

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class FrontendRouteConfig implements WebMvcConfigurer {
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/gui/**").setViewName("forward:/gui/index.html");
    }
}

注意：如果你的后端接口也使用/gui作为前缀，建议将接口统一改为/api前缀避免冲突；如果无法修改接口路径，可以调整拦截规则，排除接口路径后再转发到index.html。

方案B：Tomcat层面配置 #

如果不需要修改Spring代码，可以在Tomcat对应webapp的WEB-INF目录下新增web.xml，配置404错误页指向index.html：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
    <error-page>
        <error-code>404</error-code>
        <location>/gui/index.html</location>
    </error-page>
</web-app>

3. 验证自定义AuthRoute逻辑 #

刷新页面时要确保用户身份信息（如存储在localStorage的token）会在页面初始化时同步加载，避免user变量初始为undefined，导致AuthRoute误判用户未登录直接重定向到首页。

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