React Router嵌套路由在Nginx Docker容器中失效问题排查

一、Dockerfile构建阶段错误（核心问题） #

你的Dockerfile多阶段构建逻辑完全错误：

• 声明了react-build阶段但未在该阶段执行任何构建操作，反而在nginx镜像（本身不含Node环境）中执行npm install和npm run build，这会直接导致构建失败，最终容器里要么没有正确的构建产物，要么复用了旧的缓存文件，这也是深层路由失效的关键原因。

修正后的Dockerfile：

# 第一阶段：完成React项目构建
FROM node:14-alpine as react-build
WORKDIR /home/node/app

# 先复制依赖文件，利用Docker缓存优化构建速度
COPY package.json ./
RUN npm install

# 复制全部项目文件并执行构建
COPY . ./
RUN npm run build

# 第二阶段：基于Nginx部署静态文件
FROM nginx:1.15.2-alpine
ENV NODE_ENV production

# 替换Nginx配置
RUN rm -rf /etc/nginx/conf.d
COPY conf /etc/nginx

# 从构建阶段复制生成的静态文件
COPY --from=react-build /home/node/app/build /usr/share/nginx/html

# 暴露端口
EXPOSE 3000

# 处理环境变量脚本
WORKDIR /usr/share/nginx/html
COPY ./env.sh .
COPY .env .
COPY .env.local .

RUN apk add --no-cache bash
RUN chmod +x env.sh
RUN sed -i -e 's/\r$//' /usr/share/nginx/html/env.sh

# 启动服务
CMD ["/bin/bash", "-c", "/usr/share/nginx/html/env.sh && nginx -g \"daemon off;\""]

二、React Router嵌套路由路径规范问题 #

你的深层嵌套路由写法不符合React Router v6的匹配规则：

• 在Material.js中，你使用了绝对路径path="/"，但该组件是嵌套在/inventory/:Item/*下的子路由，应该使用相对路径（去掉开头的/），或者通过Outlet组件实现标准的嵌套布局。

修正后的Material.js：

import { Routes, Route, Outlet } from 'react-router-dom';

return (
  <>
    <Layout>
      <Outlet />
    </Layout>
    <Routes> 
      <Route index element={<Cupper />} />
      <Route path="alumin" element={<Aluminium />} />
    </Routes>
  </>
)

同时，Inventory.js也可以优化为更规范的嵌套写法：

import { Routes, Route, Outlet } from 'react-router-dom';

return (
  <>
    <Layout>
      <Outlet />
    </Layout>
    <Routes> 
      <Route index element={<RawItems />} />
      <Route path=":Item/*" element={<Material />} />
    </Routes>
  </>
)

三、验证步骤 #

1. 替换修正后的Dockerfile和路由代码
2. 重新构建Docker镜像：docker build -t react-app .
3. 启动容器：docker run -p 3000:3000 react-app
4. 测试路由/inventory/test/和/inventory/test/alumin是否正常渲染对应的组件

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