Инициализация роутинга вне зависимости от запроса клиента

Question

Доброго времени суток.

Я пробую создать простейший spa в котором присутствует один базовый файл index.html в котором присоединены все скрипты и стили.

В секцию контента собираюсь подгружать html файлы без стилей и скриптов.

Роутинг планирую сделать с помощью sammy.js, но для упрощения можно представить, что буду вручную прописывать window.hitory.

Опять же, для упрощения - никаких фреймворков, библиотек не рассматриваю, к определённому типу сервера не привязываюсь, интересует подход.

Структура может быть следующая:

index.html // файл с подключёнными файлами app.js и styles.css;
app.js
styles.css
pages // папка в которой находятся файлы с обычным html, без лэйаутов, подключения скриптов и стилей;
- main.html;
- about.html;
- contact.html;

Когда пользователь заходит на ://example.net, или ://example.net/index.html вопросов не возникает.

Вопрос появляется, если пользователь изначально прописывает в адресной строке адрес, отличный от базового, например ://example.net/pages/main.html

Но, мне нужен изначально index.html, для прогрузки всех скриптов(стилей).

Мне лучше конфигурировать сервер, ведь прописывать скрипт в каждом темплейте, так это уже не spa? Как это происходит на практике? Всё отправлять на app.js, в котором инициализировать index.html, а потом смотреть на запрос?

Answer 1

Я решал похожую задачу, додумался написать виртуальный роутер, роутер, не использующий реальную адресную строку браузера. Браузер всегда находится на index.html, что на мой взгляд, очень удобно, так как можно раздать проект с Github Pages. Для разбора шаблонной ссылки с параметрами он использует модуль path-to-regexp, парсер ссылок, использующийся в Express.

<Router>
  <Route url="/" component={BriefPage}/>
  <Route url="/list" component={ListPage}/>
  <Route url="/one/:id" component={OnePage}/>
</Router>

Роутер использует React, однако, webpack или обвязка create-react-app при работе с ним не нужны: для сборки используется только TypeScript Compiler. Благодаря этому вы можете вручную управлять своими зависимостями без npm, что удобно в малых студенческих проектах.

Вы можете посмотреть spa и исходный код, написанный с его применением, по ссылке

БЛОГ НА HUSL

Инициализация роутинга вне зависимости от запроса клиента

Ответы (1 шт):