Одностраничные приложения могут отображать другой контент без загрузки новой страницы. Для этого они используют обработчики кликов по ссылкам и History API. History API позволяет управлять историей сеансов браузера. Таким образом, мы можем обновить URL-адрес при показе другой страницы (обычно называемой «представлением» в одностраничных приложениях). Он также гарантирует, что кнопка «Назад» браузера по-прежнему работает должным образом.
Взгляните на одностраничное приложение в этой лаборатории кода. Он показывает изображения кошек или собак и предоставляет ссылки для переключения между двумя животными. Кажется, работает нормально!
Раскрытие подлого 404
К сожалению, в приложении есть небольшая ошибка. Давайте посмотрим!
- Чтобы просмотреть сайт, нажмите «Просмотреть приложение» . Затем нажмите Полноэкранный режим
. - Нажмите ссылку Doggos . Обратите внимание, как изменился URL-адрес.
- Перезагрузите приложение.
Вы получаете страницу с надписью « Cannot GET /doggos » — коварный код 404. Это «подлый», потому что веб-приложение работает нормально, пока вы нажимаете только на ссылки внутри него. Он перестает работать при использовании URL-адресов в новом окне браузера или при обновлении страницы. Проблема в том, что сервер не знает, как ответить на запрос этих URL-адресов. Код JavaScript в нашем веб-приложении использует API истории для навигации между ними, но сервер не знает, что с ними делать. Всякий раз, когда сервер не знает, что делать с запрошенным URL-адресом, он отвечает кодом состояния HTTP 404 . С помощью этого кода сервер сообщает, что не нашел ничего по запрошенному URL.
В этом случае поисковые системы не будут индексировать URL-адреса, поскольку пользователь нажмет на результат поиска и найдет сообщение об ошибке, но не тот контент, который он искал, например изображения собак.
Исправление сервера
В этом проекте используется сервер express.js, написанный на JavaScript. Давайте исправим сервер, чтобы он отвечал index.html, а одностраничное приложение позаботится обо всем остальном.
- Нажмите Remix to Edit, чтобы сделать проект доступным для редактирования.
- Выберите файл
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-адреса.
- Чтобы просмотреть сайт, нажмите «Просмотреть приложение» . Затем нажмите Полноэкранный режим .
Обновление и открытие ссылок в новом окне в режиме инкогнито теперь должно работать как положено.