Одностраничные приложения могут отображать разный контент без загрузки новой страницы. Для этого они используют обработчики кликов на ссылках и API истории. API истории позволяет манипулировать историей сеанса браузера. Таким образом, мы можем обновлять URL при отображении другой страницы (обычно называемой «представлением» в одностраничных приложениях). Это также гарантирует, что кнопка «Назад» браузера по-прежнему работает так, как и ожидалось.
Взгляните на приложение Single Page в этой кодовой лаборатории. Оно показывает изображения кошки или собаки и предоставляет ссылки для переключения между двумя животными. Кажется, работает отлично!
Раскрытие скрытой ошибки 404
К сожалению, в приложении есть небольшой баг. Давайте посмотрим!
- Для предварительного просмотра сайта нажмите View App . Затем нажмите Fullscreen
. - Нажмите на ссылку Doggos . Обратите внимание, как изменился URL.
- Перезагрузите приложение.
Вы получаете страницу с надписью « Cannot GET /doggos » — подлый код 404. Он «подлый», потому что веб-приложение, кажется, работает нормально, пока вы нажимаете только на ссылки внутри него. Он ломается при использовании URL-адресов в новом окне браузера или при обновлении страницы. Проблема в том, что сервер не знает, как отвечать на запрос этих URL-адресов. Код JavaScript в нашем веб-приложении использует API истории для навигации между ними, но сервер не знает, что с ними делать. Всякий раз, когда сервер не знает, что делать с запрошенным URL-адресом, он отвечает кодом статуса HTTP 404 С помощью этого кода сервер сообщает, что ничего не нашел для запрошенного URL-адреса.
В этом случае поисковые системы не будут индексировать URL-адреса, поскольку пользователь нажмет на результат поиска и увидит сообщение об ошибке, но не тот контент, который он искал, например, фотографии собак.
Исправление сервера
Этот проект использует сервер express.js , написанный на JavaScript. Давайте исправим сервер, чтобы он отвечал index.html, а одностраничное приложение позаботится обо всем остальном.
- Нажмите «Ремикс для редактирования», чтобы сделать проект редактируемым.
- Выберите файл
server.js.
Этот файл содержит код сервера. Он настраивает сервер express.js и отправляет содержимое index.html. Настройка маршрута в строке 15 обслуживает только веб-приложение, когда запросы идут на URL / . Сервер также должен обслуживать другие URL-адреса, которые мы создали. Давайте изменим это, чтобы обслуживать все URL-адреса, чтобы в будущем он также работал с дополнительными URL-адресами.
Для этого мы можем изменить код, начиная со строки 15, следующим образом:
app.get('/*', function(request, response) {
response.sendFile(__dirname + '/views/index.html');
});
/* соответствует любому URL-адресу, и теперь сервер отвечает веб-приложением в index.html для любого заданного URL-адреса.
- Для предварительного просмотра сайта нажмите View App . Затем нажмите Fullscreen .
Обновление и открытие ссылок в новом окне в режиме инкогнито теперь должно работать так, как и ожидалось.