Django与React路由集成问题：直接访问React路由URL报404

你的思路完全正确，TemplateView正是解决这个问题的标准方案。核心逻辑是：让Django在匹配不到自身专属路由（比如admin、API接口）时，统一返回React的index.html，把路由控制权交给React。

你当前代码的问题 #

你在app urls.py里写了两个匹配所有路径的路由：

re_path(r'^.*', TemplateView.as_view(template_name='index.html')),
re_path(r'^.*$', home_page)

Django的路由是从上到下匹配的，第一个^.*已经能匹配所有请求（包括带后缀的路径），第二个路由永远不会被执行。而且这种写法会把Django的admin路由也覆盖掉，导致你无法访问后台。

正确的配置步骤 #

1. 优先保留Django的专属路由：把admin、API接口等Django自己处理的路由放在最前面，确保它们能被正常匹配。
2. 添加兜底路由：在所有路由的最后，添加一个匹配所有剩余路径的规则，返回React的index.html。

修正后的代码

项目根目录urls.py

这个文件不用改，保持现有配置即可：

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('dashboardapp.urls')),
]

应用dashboardapp/urls.py

只保留一个兜底路由，并且确保它在所有Django专属路由的最后：

from django.urls import path, re_path
from django.views.generic import TemplateView

# 如果有Django的API路由，放在这里，比如：
# path('api/', include('your_api_urls')),

# 兜底路由：匹配所有未被上面路由处理的请求
re_path(r'^.*$', TemplateView.as_view(template_name='index.html'))

或者用你自己的home_page视图也可以，效果完全一样：

from django.urls import path, re_path
from .views import home_page

# 同样先放API路由（如果有）

re_path(r'^.*$', home_page)

原理说明 #

当用户直接输入React的路由URL（比如www.domain.com/dashboard）时，Django会先检查是否有匹配的自身路由（比如admin、API），如果没有，就返回index.html。React加载后，会读取浏览器URL，通过自身的路由规则渲染对应的页面组件。

额外注意事项 #

• 确保React使用BrowserRouter而不是HashRouter，后者会在URL里加#，虽然也能工作，但不符合常规URL格式。
• 确认你的index.html里正确引入了React打包后的静态资源，Django的静态文件配置正常。

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