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

2017, 17 мая

Вы не продвинетесь далеко с SPA (одностраничным приложением), не имея какой-то разновидности маршрутизации. Все фреймворки SPA (React, Angular, Ember и т. д.) включают маршрутизатор по умолчанию, и обычно есть дополнительные маршрутизаторы, если вам нужно что-то помимо того, что включает ваш фреймворк.

Но мы кипятим океан здесь! Мы скручиваем собственные сигареты и собственные библиотеки.

Основная идея заключается в том, что каждая ссылка в вашем SPA требует индивидуального поведения. Обычно ссылка загружает совершенно новую страницу; все перезапускается, и процесс начальной загрузки повторяется. Фигово. Этот процесс прямо противоположен целям SPA. Вместо этого мы захватываем все ссылки и меняем их поведение по своему усмотрению. В случае Xanablog делается запрос AJAX для загрузки следующей страницы Markdown, а затем динамически загружается в DOM через React.

Наш роутер супер-пупер легкий и на самом деле делает только одну вещь. Возможно, нам нужно будет расширить это позже. Но на данный момент наш маршрутизатор действительно делает только одну вещь, как обсуждалось выше.

Полную реализацию можно найти в Router.tsx, здесь выделены два момента.

Перехват ссылки

Перехватите событие ссылки 'click' и предотвратите нормальное поведение.

let link = getDomLink();
link.addEventListener('click', (e: Event) => {
  // Prevent normal link behavior:
  e.preventDefault();
  // Do whatever we want here.
  // i.e. send bitcoin to Xanablog.
}

Гражданство с хорошей историей

Пользовательской обработки ссылок недостаточно. Мы хотим сохранить нативную и ожидаемую функциональность браузера «назад» и «вперед».

// Hijack link as above and ...
let path = // whatever makes sense for the URL.
window.history.pushState({}, '', path);

Вывод

И вот он, супер простой маршрутизатор, обеспечивающий навигацию нашего SPA.