Django/React 應用程序：如何在我的 web 應用程序中兼容地同時擁有 Django URLS（用於 api 發送數據）和 React URLS（用於呈現我的組件）

Question

我剛剛將它添加到我的反應文件夾中re_path(r'^(?:.*)/?$', views.index),在關注這個 stackoverflow 帖子之后：反應路由和 django url 沖突。 我在開發工具中的錯誤是：Unknown_URL_Scheme

但是，在我的情況下，這會產生問題。 我將 JSON 發送到我的反應的方法是通過 url： "api/leads," ，現在無法訪問。 我如何為我的反應網址與我的 django 網址和諧共存？ 附件是我的django urls.py, react--> App.js, urls.py, views.py, index.html, and DataFetching.py （您可以在其中看到我如何從我的 api 發送數據）。

Django：網址.py

from django.urls import path
from . import views

urlpatterns = [
    path('api/lead/', views.LeadListCreate.as_view()),

]

Django 項目：urls.py

from django.contrib import admin
from django.urls import path, include, re_path

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('leads.urls')),
    path('', include('frontend.urls')),
    
]

反應--> urls.py

from django.urls import path, re_path
from . import views

urlpatterns = [
    #path('', views.index),
    re_path(r'^(?:.*)/?$', views.index),
]

順便說一句，我試圖查看 urls(r^...) 的文檔，它不會告訴我如何導入它，而是基本上說 urls 與 re_path 基本相同； 這可能是問題所在，盡管如此，我仍然不知道解決方案。

反應-->views.py

from django.shortcuts import render


def index(request):
    return render(request, 'frontend/index.html')

反應--> App.js

import './index.css';
import BellIcon from './icons/bell.svg';
import MessengerIcon from './icons/messenger.svg';
import CaretIcon from './icons/caret.svg';
import PlusIcon from './icons/plus.svg';
import DataFetching from "../DataFetching";
import DropdownMenu from "../DropDown";
import React, { useState } from 'react';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";


function App() {
  return (
    <Router>
    <div className="App">
      <Navbar>
        <NavItem icon={<PlusIcon />} />
        <NavItem icon={<BellIcon />} />
        <NavItem icon={<MessengerIcon />} />
        <NavItem icon={<CaretIcon />}>
          <h1> Hello World </h1>
          <DropdownMenu></DropdownMenu>
        </NavItem>
      </Navbar>
      
      <Switch>
          <Route path="/about">
            <About />
            <DataFetching />
          </Route>
          <Route path="/users">
            <Users />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
    </div>
    </Router>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

function Users() {
  return <h2>Users</h2>;
}

（還有很多，但不相關）

數據獲取.js

import React, {useState, useEffect} from 'react'
import axios from 'axios'

function DataFetching() {
    const [leads, setLeads] = useState([])

    useEffect(() => {
        axios.get("api/lead")
            .then(res =>{
                console.log(res)
                setLeads(res.data)
            })
            .catch(err => {
                console.log(err)
            })
    }, [])
    return (
        <div>
            <ul>
                {
                    leads.map(lead => <li key={lead.id}>{lead.name} says {lead.message}</li>)
                }
            </ul>
        </div>
    )
}

export default DataFetching

index.html

<!DOCTYPE html>
<html>
<head>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700;900&display=swap" rel="stylesheet">
    <title>React App</title>
</head>
<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root">
      <!-- React will load here -->
  </div>
  {% load static %}
  <script src="{% static "frontend/main.js" %}"></script>
</body>

</html>

如果您有更好的方法將數據發送到我的 React 應用程序或其他有用的見解，請隨時加入聊天！

編輯進度：無，仍然不知道從哪里開始解決這個問題，無法找到關於該主題的任何內容

Answer 1

我在項目 urls.py 的末尾添加了以下 re_path

from django.urls import path, include, re_path

urlpatterns = [
    ...
    ...
    re_path(r'.*', views.home)
]

這將使所有其他先前的 django url 路徑工作，如果請求的路徑不存在，則應由反應路由器處理。

我的方法鏈接的來源

Answer 2

以下是我對您的問題的看法：

首先，您在路徑api/leads/中沒有任何 url，但您確實在 urls.py 中定義了api/lead/ 。 這可能是一個錯字。 同樣在 axios，您應該使用axios.get("/api/lead/") 。

其次，你的網址應該是和諧的。 由於網址的順序：

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('leads.urls')), 
    path('', include('frontend.urls')), 
    
]

如果您在路徑/訪問 django 服務器，首先它會嘗試使用第一個路徑，因為它在/admin不匹配，它會轉到第二個路徑。 它也不匹配，所以最后它在第三個路徑與正則表達式^(?:.*)/?$匹配（任何路徑都應該匹配），因此 React 應用程序應該在那里可見。 因此，如果您修復錯字，它應該可以工作。

第三，最好讓 React 應用程序以不同於使用 Django 的方式提供服務。 您可以使用 Nginx 在生產中單獨為 React 應用程序提供服務。 或者有關於如何在生產中服務 React 的文檔。 在本地機器上，您可以使用npm start或yarn start來運行應用程序。 然后會出現 React 中的身份驗證和 session 問題。 您可以使用基於令牌的身份驗證來解決該問題。

Answer 3

這就是我解決問題的方法：

Django 項目 urls.py

from django.contrib import admin
from django.urls import path, include, re_path

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include('leads.urls')),
    path('', include('frontend.urls')),

]

django 應用程序 (API) 的 URL

from django.urls import path
from . import views

urlpatterns = [
    path('lead/', views.LeadListCreate.as_view()),
    path('profiles/', views.ProfileAPI.as_view()),

]

前端的網址

from django.urls import path, re_path
from . import views
from django.conf.urls import url

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

Django/React 應用程序：如何在我的 web 應用程序中兼容地同時擁有 Django URLS（用於 api 發送數據）和 React URLS（用於呈現我的組件）

問題描述

3 個解決方案

解決方案1
4 2022-04-12 03:14:51

解決方案2
2 已采納 2021-04-20 06:48:46

解決方案3
1 2021-04-23 14:58:43

Django/React 應用程序：如何在我的 web 應用程序中兼容地同時擁有 Django URLS（用於 api 發送數據）和 React URLS（用於呈現我的組件）

問題描述

3 個解決方案

解決方案1 4 2022-04-12 03:14:51

解決方案2 2 已采納 2021-04-20 06:48:46

解決方案3 1 2021-04-23 14:58:43

解決方案1
4 2022-04-12 03:14:51

解決方案2
2 已采納 2021-04-20 06:48:46

解決方案3
1 2021-04-23 14:58:43