Здравствуете. Наткнулся в инсте на изменение URL, но перезагрузка страницы не происходит. Если скопировать URL в другое окно но инфа тоже загружается.
Полагаю это как то так происходит: при клике по ссылке, отменяю действие по умолчанию копирую ее href в location.hash, а инфу подгружаю ajax'ом, а если браузер пользователя не поддерживает location.hash, то просто не отменяю действие по умолчанию при клике на ссылке, и человек по ней переходит.
Это предположение имеет место быть? или есть более лаконичные варианты?
Ответ
Вот минимальный код который требуется для создания клиентского роутера. К сожаления в родной для SO песочнице он не будет работать, да и в браузере если подгружать из локального фала, наверное тоже, но с сервером это работает.
Что в коде происходит -
все ссылки приводящие к изменению url помечаются классом route или любым другим способом. при загрузке js первым делом нужно выбрать все ссылки и подписать их на событие click в обработчике события click вызываем event.preventDefault() чтобы предотвратить поведение по умолчанию, а именно срабатывание ссылки которое приведет к перезагрузки страницы. с помощью History api помещаем данные о текущем пути и указываем тот самый url который бы мы хотели увидеть в строке состояния. (1) грузим при помощи ajax данные и отображаем их. стоит понимать что url хоть и выглядят красиво-как настоящие, то есть без # шеш решетки, на самом деле таковыми не являются. Если Вы зайдя на страницу http://localhost:8080 измените адрес на http://localhost:8080/orange, то все корректно отработает. Но зайдя сразу на адрес http://localhost:8080/orange Вы получите ошибку 404, так как в реальности такого адреса не существует. Для этого нужно чтобы сервер на абсолютно любой запрос всегда отдавал страницу index.html. Тогда зайдя на адрес http://localhost:8080/orange браузер код клиентского роутера, который в свою очередь распознает url и продолжит работу в штатном режиме, собирая и загружая данные по заданным правилам. Стоит так же понимать что именно клиентский роутер должен показывать страницу 404, так как только он знает какие пити существуют, а какие нет. ну и стоит добавить что в изоморфном приложение происходит почти все тоже самое за исключением того что при заходе клиентская часть роутера отрабатывает на сервере и в index.html помещается уже отрендеренная разметка.
Комментариев нет:
Отправить комментарий