Какая разница в функциональности между методами push() и replace() в объекте history, и как они по отдельности управляют историей навигации браузера?

Назначение методов навигации по истории

React Router предоставляет два основных метода для управления историей браузера: push() и replace(). Эти методы контролируют, как новые маршруты добавляются в стек навигации.

Метод push()

Метод push() добавляет новую запись в стек истории. Когда ты переходишь с помощью push(), текущий адрес сохраняется в истории браузера, позволяя пользователям нажать кнопку «назад» и вернуться на предыдущую страницу.

• Создаёт новую запись в истории
• Позволяет вернуться назад через кнопку браузера
• Полезен для стандартной навигации вперёд

Метод replace()

Метод replace() заменяет текущую запись в истории на новую, вместо того чтобы добавлять новую запись. Это означает, что предыдущий адрес не сохраняется в стеке истории.

• Перезаписывает текущую запись в истории
• Предотвращает возврат на заменённую страницу через кнопку «назад»
• Полезен для редиректов и флоу аутентификации

Ключевое отличие

Представь историю как массив посещённых адресов:

• push() добавляет новый адрес в конец массива
• replace() перезаписывает текущий элемент массива вместо добавления нового

Практический пример

Используй push() для обычной навигации, когда пользователи должны иметь возможность вернуться назад. Используй replace(), когда нужно запретить возврат на страницу — например, при редиректе неавторизованных пользователей на страницу входа: ты же не хочешь, чтобы они вернулись на защищённую страницу через кнопку «назад».