为什么React路由与Django Rest Framework的URL规则发生冲突

问题根因 #

你遇到的问题是两个配置错误叠加导致的：

1. Django全局通配路由没有排除后端接口路径，异常拦截了API请求
2. React路由配置存在逻辑冲突，导致首页加载失败

具体修复方案 #

1. 修正Django urls.py配置 #

你当前的全局通配re_path会匹配所有路径，即使你把API路由写在前面，部分特殊场景（比如Django自动补全斜杠的重定向过程）仍可能出现API请求被通配规则拦截的情况，直接修改通配规则排除/api和/admin前缀的路径即可：

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/games/', include('picksix.urls')),
    path('api/users/', include('user.urls')),
    path('', TemplateView.as_view(template_name="index.html")),
    # 修改后的全局通配规则，排除api、admin前缀的后端路径
    re_path(r'^(?!api|admin)(?:.*)/?$',TemplateView.as_view(template_name="index.html"))
]

修改后所有/api、/admin开头的请求都会正常匹配前面的业务路由，不会被返回HTML。

2. 修正React App.js路由配置 #

你当前的路由配置存在逻辑矛盾：

• 你配置了从根路径/重定向到/home，但没有定义/home对应的路由规则
• 重定向规则优先级高于后面的根路径路由，你写的<Route exact path="/" component={HomeScreen} />永远不会生效
  两种修正方式二选一即可：

方式一：删除重定向规则，直接映射根路径到首页

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/login" component={LoginScreen} />
        <Route exact path="/team/:name" component={TeamDetailScreen} />
        <Route exact path="/" component={HomeScreen} />
      </Switch>
    </Router>
  );
}

方式二：补充/home路由规则

function App() {
  return (
    <Router>
      <Switch>
        <Redirect exact from="/" to="/home" />
        <Route exact path="/login" component={LoginScreen} />
        <Route exact path="/team/:name" component={TeamDetailScreen} />
        <Route exact path="/home" component={HomeScreen} />
      </Switch>
    </Router>
  );
}

可选校验项 #

如果你是部署后出现的问题，再检查下Nginx配置，确保所有/api、/admin开头的请求都被转发到Gunicorn服务，其余静态路径正常返回index.html即可。

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