如何在 django 项目中使用 react-router 处理 404 错误

Posted 2023-02-21

【中文标题】如何在 django 项目中使用 react-router 处理 404 错误

【英文标题】：How to use handle 404 error with react-router on django projects

【发布时间】：2019-05-18 10:44:33

【问题描述】：

我目前正在构建一个 django-react 网络应用程序，我想知道如何在 react-router 而不是 django 端处理我的 404 错误，这是我的代码，404 错误将被路由到 django 服务器端.. .

urlpatterns = [
path('admin/', admin.site.urls),
re_path(r'^api/', include(urls)),
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

if settings.DEBUG:
urlpatterns += static(settings.MEDIA_URL,
                      document_root=settings.MEDIA_ROOT)


routes = getattr(settings, 'REACT_ROUTES', [])
# urlpatterns += [url(r'^', 
TemplateView.as_view(template_name='index.html'))]
urlpatterns += [url(r'^(%s)?$' % '|'.join(routes),TemplateView.as_view(template_name='index.html'))]

【参考方案1】：

这就是我会做的：

首先从 django 定义一个带有正则表达式模式的 url，它可以接受任何东西：

url(r'^.*$', TemplateView.as_view(), name="home")  # This is the view which servers the react application

并将此路径添加到 urlpatterns 的底部。

其次，在 React App 中添加新的路由器：

<Route component=NotFoundComponent />  // This component is for showing 404 page.

对于其余的路由器应该有exact。

你可以看this tutorial如何在react中实现404页面。

【讨论】：

我已经测试了您的解决方案，但它没有路由到我的 react-router 404 错误页面。它显示我的主页，例如假设 localhost:8000 是我的主页组件，当我尝试 localhost:8000/1 时，它不会路由到我的组件，而是给我 200 状态代码并显示我的主页。 [18/Dec/2018 06:41:39]“GET /5 HTTP/1.1”200 2374 [18/Dec/2018 06:41:39]“GET /static/js/main.67b00170.chunk.js HTTP/ 1.1" 304 0 [18/Dec/2018 06:41:40] "GET /api/ HTTP/1.1" 200 93

我的反应组件在

我认为你需要在这里使用exact。检查这个 SO 答案：***.com/questions/49162311/…

非常感谢，我已经能够在 react-router 上创建 404 错误路由，看来我的 django rest api 需要请求确保链接以 '/' 结尾/跨度>

【参考方案2】：

在 URL 模式中使用 url() 而不是使用 re_path。

from django.urls import path, re_path

from . import views
from django.views.generic import TemplateView

urlpatterns = [
    re_path('', TemplateView.as_view(template_name="frontend/index.html")),
    # match all other pages

]

这是解决此问题的最简单方法。