I just added this to the urls.py in my react folder: re_path(r'^(?:.*)/?$', views.index), after following this stackoverflow post: react routing and django url conflict. My error in the dev tools is: Unknown_URL_Scheme
However, in my situation, this creates problems. My method of sending JSONs to my react is through the url: "api/leads," which is now inaccessible. How do I produce a way for my react urls to exist in harmony with my django urls? Attached are my django urls.py, react--> App.js, urls.py, views.py, index.html, and DataFetching.py (where you will be able to see how I send the data from my api).
Django: urls.py
from django.urls import path
from . import views
urlpatterns = [
path('api/lead/', views.LeadListCreate.as_view()),
]
Django Project: 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')),
]
React--> urls.py
from django.urls import path, re_path
from . import views
urlpatterns = [
#path('', views.index),
re_path(r'^(?:.*)/?$', views.index),
]
By the way, I tried to look at the documentation for urls(r^...) and it wouldn't tell me how to import it, but instead basically said that urls is basically the same as re_path; this may be the problem, nonetheless, I would still not know the solution.
React-->views.py
from django.shortcuts import render
def index(request):
return render(request, 'frontend/index.html')
React--> 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>;
}
(There is more, but it is not relevant)
DataFetching.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=":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>
If you have a better way to send data to my react app, or other useful insights, feel free to drop in the chat!
EDIT PROGRESS: NONE, STILL HAVE NO CLUE ABOUT WHERE TO EVEN START ON THIS PROBLEM, CAN'T FIND ANYTHING OF SUSBSTANCE ON THE TOPIC
I just added this to the urls.py in my react folder: re_path(r'^(?:.*)/?$', views.index), after following this stackoverflow post: react routing and django url conflict. My error in the dev tools is: Unknown_URL_Scheme
However, in my situation, this creates problems. My method of sending JSONs to my react is through the url: "api/leads," which is now inaccessible. How do I produce a way for my react urls to exist in harmony with my django urls? Attached are my django urls.py, react--> App.js, urls.py, views.py, index.html, and DataFetching.py (where you will be able to see how I send the data from my api).
Django: urls.py
from django.urls import path
from . import views
urlpatterns = [
path('api/lead/', views.LeadListCreate.as_view()),
]
Django Project: 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')),
]
React--> urls.py
from django.urls import path, re_path
from . import views
urlpatterns = [
#path('', views.index),
re_path(r'^(?:.*)/?$', views.index),
]
By the way, I tried to look at the documentation for urls(r^...) and it wouldn't tell me how to import it, but instead basically said that urls is basically the same as re_path; this may be the problem, nonetheless, I would still not know the solution.
React-->views.py
from django.shortcuts import render
def index(request):
return render(request, 'frontend/index.html')
React--> 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>;
}
(There is more, but it is not relevant)
DataFetching.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./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>
If you have a better way to send data to my react app, or other useful insights, feel free to drop in the chat!
EDIT PROGRESS: NONE, STILL HAVE NO CLUE ABOUT WHERE TO EVEN START ON THIS PROBLEM, CAN'T FIND ANYTHING OF SUSBSTANCE ON THE TOPIC
Share Improve this question edited Apr 18, 2021 at 17:09 Andrew Bregman asked Apr 17, 2021 at 1:07 Andrew BregmanAndrew Bregman 1702 silver badges19 bronze badges3 Answers
Reset to default 4I added the following re_path at the end of the project urls.py
from django.urls import path, include, re_path
urlpatterns = [
...
...
re_path(r'.*', views.home)
]
that will make all the other previous django url paths work, and if a not existent path is requested should be handled by react router.
the source of my approach link
Here are my thoughts about your problem:
First, you don't have any urls at path api/leads/ but you do have api/lead/ defined in urls.py. It might be a typo. Also at axios, you should use axios.get("/api/lead/").
Second, your urls should be in harmony. Because of the order of urls:
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('leads.urls')),
path('', include('frontend.urls')),
]
If you hit the django server at path /, first it tries with first path, as it does not match at /admin, it goes to second path. It does not match either, so finally it matches with regex ^(?:.*)/?$(any path should match that) at third path, hence React app should be visible there. So it should work if you fix the typo.
Third, it would be best to have React application served differently then using Django. You can use Nginx to serve the React application seperatly in production. Or there are documentations on how you can serve React in production. In local machine, you can use npm start or yarn start to run the application. Then there will e the issue for authenitcation and session in React. You can use Token based authentication to resolve that.
This is how I fixed the issue:
Django project 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')),
]
Urls for django app (API)
from django.urls import path
from . import views
urlpatterns = [
path('lead/', views.LeadListCreate.as_view()),
path('profiles/', views.ProfileAPI.as_view()),
]
Urls for frontend
from django.urls import path, re_path
from . import views
from django.conf.urls import url
urlpatterns = [
#path('', views.index),
url('', views.index)
]