Диалоги в React Router: как не запутаться в модалках и не сойти с ума
Модальные окна в React Router могут превратить навигацию в клубок змей — разбираемся, как их приручить.
Разработчики, которые когда-либо пытались прикрутить модальные окна к React Router, знают: это как собрать IKEA-стеллаж без инструкции — вроде бы детали на месте, но в итоге всё косо и падает. Новая статья на Programming Are Hard предлагает распутать этот гордиев узел.
Автор разбирает типичную боль: когда диалог открывается по URL, а закрывается — и история браузера едет. Оказывается, проблема в том, что многие пытаются использовать useNavigate с replace, но забывают про стейт роутера. Рецепт простой: хранить состояние модалки в параметрах маршрута, а не в локальном стейте. Тогда и кнопка «Назад» работает как надо, и код не превращается в лапшу.
Кстати, если вы думали, что это очередной хайп вокруг нового API — нет, статья опирается на старый добрый React Router v6, но с неочевидными трюками. Например, использование useBlocker для подтверждения закрытия диалога — решение, которое спасёт ваших пользователей от случайной потери данных. И никаких костылей с window.confirm.
Комментарий студии METABYTE: Модалки — это как кофе: все их любят, но никто не хочет чистить кофемашину. Мы в METABYTE знаем, как сделать так, чтобы ваши диалоги не только открывались, но и закрывались без слёз. Если устали от велосипедов — обращайтесь, наведём порядок в маршрутах.