Django API与React前端集成：React Router页面刷新触发Django NotFound错误的路径配置咨询

这个问题其实很常见，本质是客户端路由和服务端路由的冲突：

当你在React里通过react-router导航时，页面跳转是React在浏览器端处理的，不会向Django发请求；但一旦刷新页面，浏览器会直接向Django发起当前URL的请求，而Django的路由表中没有匹配/products/:slug或者/products这类路径的规则，所以就返回了NotFound错误。

下面是具体的解决步骤：

1. 修改Django主路由（urls.py），添加Catch-All路由 #

我们需要让Django把所有非Admin、非API的请求都转发给React的index.html，让React Router来处理客户端路由。修改你的主urls.py如下：

from django.urls import path, include
from django.contrib import admin
from django.views.generic import TemplateView
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    # 保留原有Admin和API路由，注意要放在Catch-All路由前面
    path('admin/', admin.site.urls),
    path('api/', include('api.urls')),
    # 根路径指向index.html
    path('', TemplateView.as_view(template_name="index.html")),
    # Catch-All：匹配所有其他路径，都返回index.html
    path('<path:path>', TemplateView.as_view(template_name="index.html")),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

关键说明： #

• 一定要把Catch-All路由（<path:path>）放在最后，否则会覆盖Admin和API的路由规则。
• <path:path>是Django的路径转换器，会匹配任意深度的路径（比如/products/123、/products都能匹配）。

2. 确认React Router的路由顺序 #

你的app.js里已经做对了这一点，但还是要强调：具体路由要放在通用路由前面。比如/products/:slug要放在/products之前，因为react-router的Switch组件是从上到下匹配的，先匹配到的路由会生效。如果顺序反过来，/products会先匹配所有以/products开头的路径，导致/products/:slug无法生效。

3. 额外注意事项 #

• 确保你的index.html放在Django的templates目录下，并且settings.py中正确配置了模板路径（TEMPLATES里的DIRS要包含模板所在目录）。
• 如果是生产环境，记得把React打包后的静态文件（build目录下的static文件夹）集成到Django的静态资源管理中，可以通过配置STATICFILES_DIRS指向React的build/static目录，或者直接把文件复制到Django的STATIC_ROOT。
• 开发环境下，建议在React的package.json中配置proxy字段，把API请求转发到Django服务器（比如"proxy": "http://localhost:8000"），这样可以避免CORS问题，同时不影响路由。

这样修改后，刷新页面时Django会返回React的index.html，react-router就能正确解析当前URL并渲染对应的组件了。

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