Django-React集成问题：修改React代码后Django端口未同步更新

问题本质 #

用npm start跑React时，是开发服务器实时编译你的修改；但Django运行时，加载的是React打包构建好的静态文件——你改了代码但没重新构建，Django自然读的还是旧的默认页面。

一步步解决 #

1. 重新打包React项目 #

进入你的react_app目录，执行构建命令：

cd react_app
npm run build

这个命令会把你修改后的代码打包到build文件夹，生成最新的静态资源文件。

2. 检查Django的静态文件配置 #

打开项目根目录的settings.py，确保STATICFILES_DIRS包含React构建后的静态文件路径：

STATICFILES_DIRS = [
    BASE_DIR / 'react_app/build/static',
]

如果是开发环境（DEBUG=True），Django会自动从这个目录读取静态文件；如果是生产环境，后续还要做静态文件收集。

3. 确认视图指向正确的HTML文件 #

你的views.index函数要返回React构建后的index.html，两种写法都可以：

• 直接指定路径：

from django.shortcuts import render

def index(request):
    return render(request, '../react_app/build/index.html')

• 更规范的方式：把React的build目录加入Django的模板目录，在settings.py的TEMPLATES里修改：

TEMPLATES = [
    {
        # 保留原有配置，添加DIRS
        'DIRS': [
            BASE_DIR / 'react_app/build',
        ],
        # ... 其他配置
    },
]

然后视图里简化成：

def index(request):
    return render(request, 'index.html')

4. 强制刷新浏览器 #

有时候浏览器会缓存旧的页面，按Ctrl+Shift+R（Windows/Linux）或Cmd+Shift+R（Mac）强制刷新，就能加载最新的内容了。

5. 生产环境额外步骤 #

如果是部署到生产环境，还要运行静态文件收集命令，把所有静态资源统一放到STATIC_ROOT目录：

python manage.py collectstatic

执行时按提示确认即可。

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