Django集成React构建产物后路由异常求助：刷新/直接访问URL报404

问题原因 #

通过React的<Link>跳转是前端路由在本地处理，不会向Django发送新请求；但直接在地址栏输入路由或刷新页面时，浏览器会直接向Django发起请求，而你的Django URL配置里只处理了根路径/，没有匹配/customer/dashboard这类前端路由，所以返回404。

解决方案 #

1. 修改Django的urls.py，添加通配符路由 #

把所有非API的请求都转发到React的index.html，让前端路由接管。注意API路由必须放在通配符路由前面，避免API请求被拦截：

from django.urls import path
from rest_framework_simplejwt.views import TokenRefreshView
import views

urlpatterns = [
    path('api/token/refresh/', TokenRefreshView.as_view(), name='token_refresh'),
    path('', views.index, name='index'),
    # 新增：匹配所有带斜杠的路径，转发到index视图
    path('<path:path>', views.index, name='catchall'),
]

2. 确认React使用BrowserRouter #

确保你的React项目用的是BrowserRouter（不是HashRouter），这样前端路由才能和Django的配置配合：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Dashboard from './components/Dashboard';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/customer/dashboard" element={<Dashboard />} />
        {/* 其他前端路由 */}
      </Routes>
    </Router>
  );
}

export default App;

3. 检查Django静态文件与模板配置 #

确保Django能正确加载React build后的静态资源和index.html：
在settings.py中调整以下配置（路径根据你的项目结构修改）：

import os
from pathlib import Path

BASE_DIR = Path(__file__).resolve().parent.parent

# 模板目录包含React build文件夹
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [BASE_DIR / 'build'],  # 这里是React执行npm run build后的build目录路径
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

# 静态文件目录指向React build下的static文件夹
STATICFILES_DIRS = [
    BASE_DIR / 'build/static',
]

# 生产环境需要配置STATIC_ROOT，开发环境可忽略
# STATIC_ROOT = BASE_DIR / 'staticfiles'

4. 开发环境验证 #

重启Django服务器，现在直接输入http://127.0.0.1:8000/customer/dashboard或刷新页面，应该能正常加载React组件了。

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