React SPA部署Nginx：/login/*路径路由配置故障排查

问题根源 #

当前配置的核心问题有三点：

• Nginx的try_files最终回退路径指向了根目录的index.html，但你的React SPA入口文件实际在/login/子目录下
• React路由未指定basename，导致路由跳转时会忽略/login前缀，引发地址栏异常
• Dockerfile中存在冗余命令，增加了不必要的操作步骤

修正后的配置文件 #

1. Nginx default.conf #

server {
  listen 80;

  location /login/ {
    root /usr/share/nginx/html;
    index index.html;
    # 关键修改：回退路径改为/login/index.html，指向SPA实际入口文件
    try_files $uri $uri/ /login/index.html;
  }
}

2. Dockerfile #

FROM nginx
RUN apt-get update \
    && apt-get install vim less -y
# 无需手动创建/login目录，COPY命令会自动生成目标目录
COPY build /usr/share/nginx/html/login
COPY nginx/default.conf /etc/nginx/conf.d/default.conf
EXPOSE 80

3. React路由配置 #

function App() {
  return (
    <>
      <ReactNotifications />
      {/* 关键添加：指定basename为/login，适配子路径部署场景 */}
      <BrowserRouter basename="/login">
        <Routes>
          {/* 路由路径去掉/login前缀，basename会自动补全 */}
          <Route path="/common" element={<CommonLogin />} />
          <Route path="/fuga" element={<FugaLogin />} />
          <Route path="/piyo" element={<PiyoLogin />} />
        </Routes>
      </BrowserRouter>
    </>
  );
}

配置说明 #

• Nginx部分：try_files的最后一个参数必须精准指向React SPA的入口文件路径，否则Nginx会去根目录查找不存在的文件，直接导致页面无响应或404
• Docker部分：手动创建目标目录属于冗余操作，COPY命令会自动生成不存在的目标目录，精简后更高效
• React路由部分：basename="/login"会让所有路由自动带上/login前缀，既匹配Nginx的路径规则，又避免了跳转时地址栏丢失前缀和端口的问题

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