Django集成React生产环境刷新页面报错问题咨询

这个问题我帮不少开发者踩过坑——本质就是刷新时浏览器直接跳过React Router，给Django发了一个前端路由的请求，而Django根本没配置对应视图，自然就报错了。要让React接管刷新请求，核心思路是让Django把所有非API的请求都转发到React的入口页面，具体步骤如下：

1. 先打包并部署React静态资源 #

首先在React项目根目录执行打包命令：

npm run build

把打包生成的build文件夹里的内容按以下方式放到Django项目中：

• 将build/index.html复制到Django的templates目录下（比如templates/react/index.html），记得在html开头加上{% load static %}，并把静态资源路径改成Django模板标签格式，比如把/static/js/main.xxx.js替换成{% static 'react/js/main.xxx.js' %}。
• 将build/static下的所有文件（css、js、media等）复制到Django的static/react目录下。

2. 编写Django视图返回React入口页 #

在Django的views.py里新增一个视图函数，专门用来返回React的index.html：

from django.shortcuts import render

def react_frontend(request):
    # 模板路径要和你存放的index.html位置对应
    return render(request, 'react/index.html')

3. 配置Django URL路由（关键步骤） #

修改Django项目的urls.py，把API路由放在最前面，然后添加一个通配符路由，匹配所有非API的请求，指向刚才的视图：

from django.urls import path
from . import views

urlpatterns = [
    # 先放你的所有API路由，比如：
    path('api/posts/', views.post_list, name='post-list'),
    path('api/comments/', views.comment_list, name='comment-list'),
    # ...其他API接口...

    # 最后添加这个通配符路由，匹配任意层级的前端路由
    path('<path:route>', views.react_frontend),
]

这里用path('<path:route>', ...)可以完美匹配/dashboard/user/123这类嵌套路径，比正则表达式更简洁直观。

几个关键注意事项 #

• 确保React项目用的是BrowserRouter（不是HashRouter），HashRouter虽然不会有刷新问题，但URL会带#，不够美观，我们的方案就是为了支持更友好的BrowserRouter。
• 检查Django静态资源配置：settings.py里要确保STATIC_URL = '/static/'，且STATICFILES_DIRS包含React静态资源所在目录（比如BASE_DIR / 'static'），生产环境记得运行python manage.py collectstatic收集静态文件。
• 如果有个别静态资源（比如favicon.ico）不想被React接管，可以在通配符路由前面单独配置路由返回对应资源。

这样配置之后，不管你刷新哪个前端路由页面，Django都会把请求交给React的入口页，React Router会在客户端解析当前URL并渲染对应的组件，再也不会出现刷新报错的问题啦！

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