copal
@copal
𝄞 ...оооо baby

Вы можете дать исчерпывающий ответ на вопрос — как использовать history api в spa приложении?

Начать хочу с того, что этот вопрос не привязываю к angularjs или reactjs их теги я указал лишь потому, что они являются наиболее популярными spa фраймворками.
И возвращаясь к теме, может кто-нибудь дать исчерпывающий ответ на вопрос - что делать с history api, чтобы spa приложение индексировались поисковиками?
Что я сделал сам - полез на github и нашел там изоморфный роутер, у которого есть отдельный пункт о history-api и так же пункт в конфиге .

И мои действия дальше и являются проблемой, я раньше работал только с готовыми плагинами, которые все делали за меня. Но теперь я решил разобраться во всем, но без помощи не могу справится. Скажите, что мне нужно сделать чтобы увидеть работу этого хистери на примере двух хотя бы двух ссылок.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://rawgit.com/flatiron/director/master/build/director.min.js"></script>
</head>
    <a href="page-a">this is page-a</a>
    <a href="page-b">this is page-b</a>
    <script>
        window.addEventListener('load', function(){
            console.log('load.');
            var router = new Router({
                "/page-a": function(){
                    console.log('/page-a');
                },
                "/page-b": function(){
                    console.log('/page-b')
                }
            }).configure({
                html5history: true,
//                convert_hash_in_init: true,
//                run_handler_in_init: true
            }).init();
        });
    </script>
</body>
</html>
  • Вопрос задан
  • 483 просмотра
Решения вопроса 1
AMar4enko
@AMar4enko
У вас должно быть два обработчика одного урл.
Один - на клиенте, чтобы при клике на урл на загруженной странице ваше приложение этот клик отловило и запустило клиентский роутер.
Второй - на сервере, чтобы при первоначальном открытии страницы браузера по такой ссылке сервер вернул уже сформированные данные.

Поэтому и роутер изоморфный, он, сконфигурированный одинаково, может работать как на сервере, так и на клиенте. Но проблему индексации он вам не решит, решать ее вам придется самостоятельно. А он всего лишь инструмент.

History API в этом деле краеугольный камень, потому что именно он позволяет управлять адресной строкой страницы без ее перезагрузки, используя обычные ссылки без #
Схема такая - вы кликаете на ссылку, ее отлавливает скрипт, забирает из ссылки url, через History API заменяет адрес в адресной строке браузера (страница не перезагружается), срабатывает History API событие об изменении адреса в адресной строке, вы это событие перехватываете и скармливаете новый адрес роутеру, например вашему изоморфному.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы