Настройка React Routes, Django URL с помощью Webpack

Question

Обучаю себя, как использовать интерфейс React с сервером Django, и у меня возникают трудности с правильной работой маршрутов React.Всякий раз, когда я перезагружаю страницу, мне кажется, что я делаю GET-запрос к серверу.Обновление на локальном хосте: 8000 работает нормально, но ничего кроме ошибок маршрутизации API отсутствует.

Я уверен, что проблема в одном из моих файлов urls.py.

quiz_app/urls.py

urlpatterns = [
  path('', include('quizzes.urls')),
  path('', include('frontend.urls'))
]

frontend/urls.py

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

quizzes/urls.py

urlpatterns = [
  path('admin/', admin.site.urls),
  path(r'^nested_admin/', include('nested_admin.urls')),
  re_path('api/quizzes/', views.QuizList.as_view()),
  re_path('api/quizzes/<str:name>/', views.SingleQuiz.as_view()),
  re_path('api/questions/', views.QuestionList.as_view()),
  re_path('api/answers/', views.AnswerList.as_view())
]

Для хорошей меры:

frontend/views.py

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

frontend/src/App.js

class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">
          <Grid>
            <Header />
            <Route exact path="/" component={Quizzes} />
            <Route exact path="/:name" component={Quiz} />
          </Grid>
        </div>
      </Router>
    )
  }
};

Повторим, проблема в том, что маршруты "/:name" в App.js пытаются отправлять «GET» запросы серверу Django и выдают ошибку, потому что нет ничего, что можно обработать, вместо того, чтобы по умолчаниюРеагировать на маршрут.Дайте мне знать, что я делаю не так здесь.Я исправил эту проблему при использовании React с другими серверными средами, но я новичок в Python / Django, поэтому не уверен, куда идти.

Answer 1

Если я правильно понимаю ваш вопрос, то views.html отображает страницу, на которой будет запускаться приложение, определенное в App.js.И проблема, с которой вы столкнулись, заключается в том, что если вы перейдете по URL-адресу http://yourserver/my-quiz, где my-quiz - это имя теста, запрос будет отправлен на сервер Django, который говорит: 404, я не знаю об этом URL-адресе.

Одним из рабочих решений является добавление универсального маршрута в основное приложение Django:

urlpatterns += re_path(r'.*', views.index)

в качестве последнего маршрута.Это просто заставляет Django отображать ваше приложение для каждого запроса, а маршрутизация позаботится о маршрутизации.

Недостатком этого является то, что вы не получите 404, если страница действительно не существует (в вашем случае нет теста с таким именем).Я пока не нашел решения для этого, за исключением дублирования конфигурации маршрутизации (в вашем случае, проверяя в приложении Django, существует ли тест с таким именем).

Answer 2

обычно в среде внешнего интерфейса, например (angular, реагировать, vue), маршрутизаторы обрабатывают только те вызовы (на стороне клиента) и рисуют правильный компонент для каждого маршрута, поэтому вам нужен компонент, который работает как служба, и там звонки в бэкэнд API. E.J.

utility.js

export function get_some_route(){
    return fetch('some_route');
}

файл утилиты содержит функции для извлечения внутренних маршрутов. так что вы можете импортируйте этот файл и получите данные в компоненте, отображаемом для маршрутизатора.

your_component.js

import get_some_route from 'utility.js';
class x extends component{
  ...
  componentDidMount(){
     get_some_route().then(response => {
         // do some thing with the data e.j
         this.setState({data: response.data});
     }
  }
  ...
  render(){
      return(/*some html with the data */);
  }
}