基于Nginx在Docker中部署带子路由的React应用导航异常排查

问题根源 #

导航时URL的/my-app前缀被移除，核心原因是React Router未感知应用部署在子路径下，同时容器内Nginx的路径配置未匹配实际文件结构。

具体修复步骤 #

1. 给React Router设置basename

修改index.js中的BrowserRouter，添加basename="/my-app"，让路由跳转时自动带上子路径前缀：

ReactDOM.render(
    <Box sx={{ display: 'flex' }}>
        <BrowserRouter basename="/my-app"> {/* 新增basename配置 */}
            <Switch>
                <Route path="/login">
                    <LoginPage />
                </Route>
                <Route path="/explorer">
                    <InnerApp />
                </Route>
                <Route path="/">
                    <HomePage />
                </Route>
            </Switch>
        </BrowserRouter>
    </Box>,
    document.getElementById('root')
)

2. 调整容器内Nginx配置

你的index.html位于/usr/share/nginx/html/my-app/下，当前容器内Nginx的location /配置会从根目录找文件，需要匹配实际路径：

方案一：保留容器内路径结构，修改location规则

location /my-app/ {
    root              /usr/share/nginx/html;
    index index.html index.htm;
    try_files $uri $uri/ /my-app/index.html;
}

该配置会让容器内Nginx处理/my-app/开头的请求，从/usr/share/nginx/html/my-app/下读取对应文件，路由刷新时也会正确回退到my-app/index.html。

方案二：将容器内根路径指向my-app目录
如果不想在容器内保留/my-app路径，可以修改root并简化location：

location / {
    root              /usr/share/nginx/html/my-app;
    index index.html index.htm;
    try_files $uri $uri/ /index.html;
}

这种情况下，外部Nginx的proxy_pass需要去掉末尾的/my-app/，修改为：

location /my-app/ {
    proxy_pass              http://localhost:port_docker_container/;
}

3. 确认package.json配置

你已设置"homepage": "/my-app"，这个配置正确，它保证了打包后的静态资源路径会自动带上/my-app前缀，无需修改。

验证 #

重新打包React应用，更新容器内的静态文件，重启外部和容器内的Nginx服务，测试以下场景：

• 访问https://my_server/my-app/能正常显示首页
• 点击导航到/login时，URL会变为https://my_server/my-app/login，不会丢失前缀
• 直接刷新https://my_server/my-app/login也能正常加载页面

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