Django3.2+React17生产环境直访react-router-dom6嵌套URL空白页问题

生产环境直接访问嵌套路由空白，核心是两个配置问题：

1. 之前的Django通配路由正则没有排除静态资源后缀，会把js、css等静态资源请求也返回成React入口html，浏览器把html当js解析直接报错，页面渲染失败
2. 你尝试过的"homepage": "."配置会让构建出来的静态资源用相对路径引用，访问/auth/signup这类二级路径时，会错误从/auth/static/目录下找资源，路径不存在直接404

本地开发环境正常是因为前端dev server默认内置了history fallback逻辑，自动处理了路径转发，生产环境没有这套逻辑就会出问题。

第一步：修正Django路由匹配顺序与规则 #

必须保证静态资源、后端接口路由优先级高于前端兜底路由，同时调整通配正则，避免拦截静态资源请求：

from django.views.generic import TemplateView
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    # 优先放置后端路由，比如admin、业务接口
    # path('admin/', admin.site.urls),
    # path('api/', include('api.urls')),
]

# Debug环境下的静态资源托管
if settings.DEBUG:
    urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

# 最后放置前端路由兜底规则，排除所有常见静态资源后缀
urlpatterns += [
    re_path(r'^(?!.*\.(?:js|css|png|jpg|jpeg|gif|svg|ico|json|woff|woff2|ttf|map)$).*$', TemplateView.as_view(template_name='index.html')),
]

注意：使用TemplateView返回index.html前，先确认Django的TEMPLATES配置中，DIRS参数已经包含React构建产物的build文件夹路径，否则Django找不到入口html文件。

第二步：修正React构建的资源路径配置 #

不要用相对路径配置静态资源引用，否则嵌套路由下资源路径拼接必然出错：

• 如果你用Create React App构建：把package.json里的homepage字段改为"homepage": "/"，不要填完整域名也不要填.
• 如果你用Vite构建：在vite.config.js里配置base参数为绝对路径：

export default defineConfig({
  base: '/',
  // 其余原有配置
})

• 确认构建后的index.html中，所有js、css资源引用都是以/开头的绝对路径，不要出现./static/xxx这类相对路径写法，之前加的<base href="/" />标签可以保留，不冲突。

第三步：检查React Router配置 #

react-router-dom v6的BrowserRouter如果没有部署在子路径下，不需要额外配置basename，显式指定根路径即可：

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

ReactDOM.render(
  <BrowserRouter basename="/">
    <Routes>
      <Route path="/auth/signup" element={<Signup />} />
      {/* 其余业务路由 */}
    </Routes>
  </BrowserRouter>,
  document.getElementById('root')
)

Nginx反向代理额外配置 #

如果生产环境用Nginx做反向代理，优先在Nginx层处理前端路由转发，减少Django的请求压力：

# 前端静态资源与路由规则
location / {
    root /path/to/your/react/build/folder;
    try_files $uri $uri/ /index.html;
}

# 后端路径转发给Django服务
location /api/ {
    proxy_pass http://127.0.0.1:8000;
}
location /admin/ {
    proxy_pass http://127.0.0.1:8000;
}

配置完成后重新构建前端代码、重启Django与Nginx服务即可，验证时打开浏览器控制台，确认访问嵌套路由时所有js、css资源都是从/static/根路径加载，无404、无MIME类型错误，页面就能正常渲染。

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