Проблема с кэшем в React и django

У меня есть приложение react и django, которое обслуживается за nginx. Маршруты /admin и /api указывают на uwsgi. Однако при загрузке этих маршрутов обслуживается приложение react, пока не будет выполнено жесткое обновление страницы. Кажется, что react обслуживает все маршруты, а не только index.

Есть ли способ исключить маршруты в react, чтобы он отображал только путь "/" или есть что-то в конфигурации nginx/django, что я могу изменить, чтобы решить эту проблему.

Вот фрагмент из моего nginx conf:

    location / {
        try_files $uri $uri/ =404;
    }
    location /api/ {
        uwsgi_pass  uwsgi;
        include     /etc/nginx/uwsgi_params;
    }
    location /admin/ {
        uwsgi_pass  uwsgi;
        include     /etc/nginx/uwsgi_params;
    }

и мой django urls config:

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/v1/', include(routers.urls))
]

Любые идеи о том, как я могу действовать, будут признательны

Похоже, что React перехватывает событие onClick ссылки и не дает браузеру нормально его обработать.

Вы можете попробовать изменить теги ссылок так, чтобы они не позволяли React делать это:

<a href="/admin/" onClick={() => { location.href = "/admin/" }}>Admin</a>

/* Or if using react router */
<Link to="/admin/" onClick={() => { location.href = "/admin/" }>Admin</Link>

Есть ли способ исключить маршруты в react, чтобы он отображал только путь "/"...

Как добавляются или настраиваются маршруты в React? Их следует изменить, чтобы использовать формат, который я проиллюстрировал выше, или удалить, если вы не хотите, чтобы они отображались вообще.

... или есть что-то в конфигурации nginx/django, что я могу изменить, чтобы преодолеть эту проблему.

Ваша конфигурация nginx написана правильно. Вы можете протестировать ее здесь.

Кажется, я нашел решение.

1- обновите ваши react-скрипты до ^v4

2- добавьте ссылки, которые вы не хотите кэшировать, в файл service-worker.js:

registerRoute(
   ({ request, url }) => {

      ...

      if (
         url.pathname.startsWith('/admin') ||
         url.pathname.startsWith('/api')
      ) {
         return false;
      }

      ...

      return true;
   },
   createHandlerBoundToURL(process.env.PUBLIC_URL + '/index.html')
);
Вернуться на верх