Django集成React Router后页面仅显CSS、内容空白问题求助

1. 修复React App组件的定义与导出问题 #

你这App.js没定义组件也没导出，React根本没法渲染它。改成下面这样：

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

function App() {
  return (
    <Router>  
      <Routes>
        <Route path='/register' element={<Form/>} />
        {/* 加个根路由兜底，避免其他路径也出现空白 */}
        <Route path='/' element={<div>首页</div>} />
      </Routes>        
    </Router>
  );
}

export default App;

同时检查index.js，确保它正确渲染App组件：

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

2. 调整React Router的路由规则 #

React Router v6已经移除了exact属性，默认就是精确匹配，直接删掉即可。另外要保证React的路由路径和Django的路由完全对应，避免嵌套冲突。

3. 配置Django静态文件服务 #

React打包后的css、js等静态资源，需要Django能正确找到它们。在mysite/settings.py中添加以下配置：

import os

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'frontend/build/static'),
]

# 核对模板目录配置（你已设置，再确认下）
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'frontend/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',
            ],
        },
    },
]

顺便检查frontend/build/index.html里的静态资源路径是否正确，正常打包后React会自动生成正确路径，若有问题可手动调整link和script标签的href/src属性。

4. 排查Form组件本身问题 #

有可能是Form组件自身存在语法错误或未返回有效内容，给个简单的正确示例参考：

function Form() {
  return (
    <div className="form-container">
      <h2>注册表单</h2>
      <form>
        <label>用户名：<input type="text" name="username" /></label>
        <label>密码：<input type="password" name="password" /></label>
        <button type="submit">注册</button>
      </form>
    </div>
  );
}

export default Form;

5. 重新构建React项目 #

修改完React代码后，必须重新打包才能让Django加载最新内容：

cd frontend
npm run build

6. 可选：添加Django路由兜底规则 #

如果想让用户直接访问React路由路径（比如直接输入/register）也能正常显示，可在Django主urls.py中添加捕获所有路由的规则：

# mysite/urls.py
from django.contrib import admin
from django.urls import path, re_path, include
from django.views.generic import TemplateView

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('main.urls')),
    # 所有未匹配的路径都返回React的index.html，交给React Router处理
    re_path(r'^.*$', TemplateView.as_view(template_name='index.html')),
]

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