Как подружить Backbone Router и Webpack-dev-server?

Question

[Алексей Ермолаев]

Пытаюсь настроить Backbone Router так, чтобы он обрабатывал url без хеша после слеша
e.g (` localhost:9500/photos/1234 ` вместо ` localhost:9500/#photos/1234 `).

В главном файле создаю новый инстанс роутера и вызываю ` Backbone.history.start({ pushState: true }) `.

К сожалению по клику на ссылку, страница продолжает перезагружаться, и естесвенно, падает 404. Опция ` historyApiFallback ` в конгфиге дев сервреа толку не дает, лишь только перенаравляет на рутовый путь.

То есть мои url не перехватываются роутером. Если в url есть хеш, то она обрабатывается, иначе нет. Как можно это нормально настроить?

Да, я использую handlebars для шаблонизации, и шаблон вьюхи фотографии выглядит примерно так:

<article class="photo__item">

    <a href="photos/{{ id }}">

      {{ id }} <br>
      {{ date }} <br>

      <img src="{{ baseImage }}" alt="">

      <p>{{ text }}</p>

    </a>
  </article>

Конфиг дев-сервреа выглядит так:

devServer: {
    contentBase: path.join(__dirname, "./server"),
    publicPath: "/public/",

    historyApiFallback: {
      index: "/"
    },

    compress: true,
    hot: true,

    port: 9500
  },

Роут к детальному фото в классе роутера

get routes() {

    return {
      "photos/:id": "getDetail"
    };

  }

  //Пока хотя бы записать в консоль
  getDetail(query) {
    console.log(query);
  }

И вызов главной вьюхи:

$(() => {

  moment.locale("ru");

  VK.init({ apiId });

  const mainView = new MainView();

  rootNode.append(
    mainView.render().$el);

  const router = new Router();

  Backbone.history.start({ pushState: true });

});

Comments

[Алексей Ермолаев]

Похоже, мне удалось наcтроить роутер, чтобы он обрабатывал url без хеша, путем
вызова обработки события роута в главном файле:

//main.js
  const router = new Router();

  router.on("route:photos", (id) => console.log(`${id} from main router`));

  //router.js

   get routes() {

    return {
      "photos/:id": "photos"
    };

  }

Однако остлась проблема -- страница перезагружается по клику на url фотографии.
Хочется настроить роутинг без перезагрузки страницы, так как я загружаю коллекцию фото по api, на момент загрузки страницы коллекция еще не существует (загрузка идет после авторизации пользователя).