Как настроить роуты в Django + React?

Question

[authoraytee]

У меня не получается правильно настроить роуты

Конкретнее:
Сейчас работает так, что по пути есть localhost:8000/api/ передается api в json формате,
а по пути localhost:3000/ - фронтенд на реакте, так всё работает правильно

НО

Я хочу сделать так, чтоб api работал по пути localhost:8000/api/todos/, а фронт на localhost:3000/todos/, но у меня не получается сделать никак вообще, я не понимаю

Возможно это делается всё очень просто, подскажите, пожалуйста!

Вот мой код:
config - папка с настройками, главная папка django
todos - приложение
frontend - папка с реактом

config/urls.py:

from django.contrib import admin
from django.urls import include, path # new

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include('todos.urls')), # new
]

todos/urls.py:

from django.urls import path
from .views import ListTodo, DetailTodo

urlpatterns = [
	path('<int:pk>/', DetailTodo.as_view()),
	path('', ListTodo.as_view()),
]

todos/models.py:

from django.db import models

class Todo(models.Model):
	title = models.CharField(max_length=200)
	body = models.TextField()
	
	def __str__(self):
		return self.title

todos/views.py

from rest_framework import generics
from .models import Todo
from .serializers import TodoSerializer

class ListTodo(generics.ListAPIView):
	queryset = Todo.objects.all()
	serializer_class = TodoSerializer

class DetailTodo(generics.RetrieveAPIView):
	queryset = Todo.objects.all()
	serializer_class = TodoSerializer

todos/serializers.py:

from rest_framework import serializers
from .models import Todo

class TodoSerializer(serializers.ModelSerializer):
	class Meta:
		model = Todo
		fields = ('id', 'title', 'body',)

fronteds/src/App.js:

import React, { Component } from 'react';
import axios from 'axios'; 

class App extends Component {
    state = {
      todos: []
    };

    componentDidMount() {
      this.getTodos();
    }

    getTodos() {
      axios
        .get('http://127.0.0.1:8000/api/')
        .then(res => {
          this.setState({todos: res.data });
        })
        .catch(err => {
            console.log(err);
        });
    }

    render() {
        return ( 
            <div> 
              {this.state.todos.map(item => ( 
                  <div key = {item.id}>
                      <h1>{item.title}</h1> 
                      <span>{item.body}</span>
                  </div>
              ))} 
            </div>
        );
    }
}

export default App;

Answer 1

[authoraytee]

Получилось исправить, решил так:
Путь до api сменил на localhost:8000/api/todos/
В App.js изменил путь до api так:
.get('http://127.0.0.1:8000/api/todos/')

В index.js добавил роуты:

import React from 'react';
import ReactDOM from 'react-dom';
import {
    BrowserRouter as Router,
    Routes,
    Route
} from "react-router-dom";
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
    
const Routing = () => {
      return(
        <Router>
          <Routes>
            <Route exact path="todos/"  element={<App />} />
          </Routes>
        </Router>
      )
}
    
ReactDOM.render(
      <React.StrictMode>
        <Routing />
      </React.StrictMode>,
      document.getElementById('root')
);
reportWebVitals();