如何将React Router的Link路径适配到Django后端URL以解决404问题？

问题核心是Django路由优先级导致的前端路由失效：当直接访问/rooms/1/UCL这类前端路由路径时，Django会优先匹配自身的路由规则，但你的urls.py中没有对应配置，因此返回404。而React Router属于前端路由，需要先加载根路径的index.html，才能由前端接管路由解析。

解决步骤 #

修改Django的urls.py，让所有未被Admin、API路由匹配的路径，都返回React的入口文件index.html，具体操作如下：

1. 导入re_path用于正则匹配任意路径
2. 替换原根路径配置为全局匹配规则

修改后的urls.py代码：

from re import template
from xml.etree.ElementInclude import include
from django.contrib import admin
from django.urls import path, include, re_path  # 新增导入re_path
from django.views.generic import TemplateView

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include('api.urls')),
    # 匹配所有未被上述规则捕获的路径，返回React入口文件
    re_path(r'^.*$', TemplateView.as_view(template_name='index.html')),
]

额外注意事项 #

• 确保React项目中react-router-dom的路由配置正确，比如存在对应动态路径的路由组件：

  import { Routes, Route } from 'react-router-dom';
  import RoomDetail from './components/RoomDetail';
  
  function App() {
    return (
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/rooms/:id/:school" element={<RoomDetail />} />
      </Routes>
    );
  }
  

• 确认Django的TEMPLATES配置能正确定位到index.html文件，该文件通常放在项目的templates目录下。

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