如何集成 Django 和 react-router-dom？

Posted 2023-02-21

【中文标题】如何集成 Django 和 react-router-dom？

【英文标题】：How do I integrate Django and react-router-dom?

【发布时间】：2019-03-21 09:01:13

【问题描述】：

如何设置 Django urls.py 和 React 组件来建立它？ 我的要求是让 Django 使用 urls 文件呈现主页：

urlpatterns = [
    path('', views.index),
    ]

React 路由器然后应该渲染后续链接（例如 /home、/about）

【问题讨论】：

你能提供更多细节吗？ “建立这个”是什么意思？

编辑了更多信息

【参考方案1】：

要使用 django 2.0 path 语法设置包罗万象的路由，请使用 <path:> converter。这会将任何 url 路由到从 views.index 提供的 react 应用程序。

urlpatterns = [
    path('<path:route>', views.index),
]

对于正则表达式路由，一个空字符串是一个包罗万象的。

urlpatterns = [
    re_path('', views.index),
]

如果您有不应路由到 react 应用的路由，则必须首先包含这些路由。

urlpatterns = [
    path('admin/', admin.site.urls),
    path('<path:route>', views.index),
]

【讨论】：

我使用的是 Django 3.1，<route:path> 不适合我。不过，<path> 成功了。 route 部分是否在这里提供了一些不明显的功能？

@Derek。谢谢你抓住那个。其实我弄错了，没有人注意到。应该是<path:route>，我现在已经编辑了我的答案以更正它。这里的“路由”只是段的名称，将作为关键字参数传递给视图函数。使用path: 转换器的原因也是为了捕获可能包含任何/ 的uls。如果你只使用<path>，我认为它相当于<str:path>。默认的str: 转换器不接受/，因此它不是真正的包罗万象的路由。

【参考方案2】：

您的 React 应用程序将从单个页面提供服务。我假设您的 view.index 是您的空白 html，通常看起来像这样：

<div id="root"></div> <script src="/dist/bundle.js"></script>。

（确保您的应用程序包在脚本标记中提供）。 Django 将提供带有关联路由的 html 文件。在您的情况下，如果您希望应用程序的根是 React，那么您的 urls.py 将如下所示：

urlpatterns = [ path('/', views.index), ]

一旦 Django 提供了 html 文件，并且脚本标签完成将您的应用程序加载到该页面上 - 此时它将进入您的 React 应用程序的根目录，并且 React-Router 将从那里接管。 Django 不会知道任何进一步的路由，因为一旦 React 接管路由是“虚拟的”。我希望这能回答您的问题 - 如果您需要任何进一步的信息，请告诉我。

【讨论】：

能够让它工作 :) 关于如何让 react-router-dom 中的 BrowserHistory 与 django 后端一起工作的任何想法？

Nvm，能够通过使用 HashRouter 来修复它:)

很高兴您找到了解决方案！供将来参考this 是关于浏览器历史对象的线程。