Переходы страницы очереди в React Router

Question

У меня есть веб-проект, основанный на React, где я использую React Router 4 для управления своей маршрутизацией.Я делал несколько шагов с React Router вместе с «response-transition-group», добавляя переход постепенного изменения, основанный на классах компонента CSSTransition, то есть fade-enter, fade-enter-active и т.д ...

В любом случае - все работает хорошо и все, но если я быстро нажму кнопки браузера вперед и назад, чтобы изменить маршрут, то переходы прервутся и будут больше переходить в «новое состояние перехода».

Существует ли способ поставить в очередь измененный маршрут, чтобы, если пользователь переключается на другой маршрут, когда переход уже выполняется, дождаться завершения первого перехода, а затем обработать «новый маршрут»,Я не хочу, чтобы местоположение / URL были остановлены или что-то еще, чтобы переход работал более плавно ...?

Спасибо

Answer 1

Я сделал библиотеку для решения этой проблемы.

npm: реакции-очереди-маршрутизатор
документ: https://tokky0425.github.io/react-queue-router/

Это, вероятно, то, что вы хотите.
(Если что-то не работает, пожалуйста, опубликуйте номер на github.)

По сути, проблема в том, что вы не можете отменить или остановить (например, e.preventDecault) изменение location.pathname, когда пользователь нажимает кнопки браузера вперед и назад.
Одним из решений является реализация маршрутизации не на основе location.pathname, а на основе другого значения, которое вы где-то сохранили вручную.

В случае библиотеки, о которой я упоминал выше, история location.pathname будет поставлена ​​в очередь в массиве, а монтирование компонента будет выполняться один за другим в зависимости от значения массива
Это позволяет дождаться окончания анимации перехода.
(Поскольку изменение location.pathname просто означает, что путь будет помещен в очередь в массиве.)

Кажется, что React Router трудно выполнять эту работу, если его маршрутизация реализована на основе location.pathname.