Маршрутизация и History API

Теперь наше приложение практически готово, но состоит всего из одной страницы. Пришло время разобраться с маршрутизацией. Поэтому сегодня сэмулируем многостраничность в одностраничном приложении на JavaScript. Интегрируем маршрутизацию с адресной строкой браузера через хэши и History API. Отрефакторим код маршрутизатора через композицию для повторного использования в разных проектах. И в итоге перейдём на аналогичный готовый React Router. И помимо этого эффектами доработаем автообновление цен лотов и добавим возможность делать шаблоны для страниц:

• 00:00:44 - Создание компонента Router
• 00:01:22 - Добавление состояния локации
• 00:03:02 - Переключение локации
• 00:04:55 - Использование ссылок
• 00:07:53 - Вынос компонента Link
• 00:12:40 - Вынос маршрута Route
• 00:15:13 - Передача через контекст
• 00:17:37 - Хук для контекста
• 00:19:25 - Дополнительные опции ссылок
• 00:20:41 - Вынос навигации и контента
• 00:22:06 - Извлечение вёрстки
• 00:24:28 - Применение в приложении
• 00:26:29 - Добавление реальных страниц
• 00:29:27 - Шаблоны страниц
• 00:31:28 - Single Page Application
• 00:34:01 - Динамические маршруты с параметрами
• 00:38:10 - Передача параметров запроса
• 00:41:32 - Сопоставление по exact
• 00:45:37 - Дополнительные свойства маршрута
• 00:48:11 - Оптимизация производительности со Switch
• 00:55:59 - Если страница не найдена
• 00:57:00 - Проблема ошибок загрузки
• 00:57:49 - Кнопка повторной загрузки
• 01:00:02 - Поддержка актуальности данных
• 01:01:43 - Автовыгрузка лотов при уходе
• 01:05:38 - Привязка к адресу в браузере
• 01:06:48 - Работа с хэшами в браузере
• 01:08:22 - Работа с хэшами в JavaScript
• 01:10:28 - Подписка на hashchange
• 01:12:55 - Указание адреса в ссылках
• 01:14:06 - Рефакторинг генерации адреса
• 01:15:55 - Запуск Nginx через Docker
• 01:18:57 - Навигация через History API
• 01:27:51 - Универсальный Router
• 01:29:29 - Композиция вместо наследования
• 01:30:09 - Вынос драйвера истории
• 01:32:33 - Написание драйверов навигации
• 01:36:17 - Обзор результата
• 01:38:01 - Обзор React Router
• 01:44:36 - Подключение React Router
• 01:47:38 - Обзор результата
• 01:50:55 - Хранилище MobX
• 01:52:32 - Отличия от реального React

И теперь разобрав React пора продолжать серию по Slim и React.

А за то, что досмотрели эту серию до конца, выражаю вам свою благодарность в блоге.