Одна страница приложений и сервер маршрутизации

Question

Я получил следующий код для обработки на стороне клиента навигации с использованием HTML5 PushState (классическое сочетание crossroadsjs и historyjs):

History = window.History; 
History.Adapter.bind(window, 'statechange', function() { 
var state = History.getState(); 
console.log(state); 
if (state.data.urlPath) { 
    return crossroads.parse(state.data.urlPath); 
} 
else 
{ 
    if (state.hash.length > 1) { 
     var fullHash = state.hash; 
     var hashPath = fullHash.slice(0, fullHash.indexOf('?')); 
     return crossroads.parse(hashPath); 
    } 
}}); 

crossroads.normalizeFn = crossroads.NORM_AS_OBJECT; 
crossroads.parse('/'); 

$('body').on('click', 'a', function(e) { 
    var title, urlPath; 
    urlPath = $(this).attr('href'); 

    if (urlPath.slice(0, 1) == '#'){ 
     return true; 
    } 

    e.preventDefault(); 
    title = $(this).text().trim(); 

    return History.pushState({ urlPath: urlPath }, title, urlPath); 
    }); 

Это работает очень хорошо. Теперь, чтобы обрабатывать закладки и общий доступ к URL, я добавил и выражал сервер для обработки всех запросов. Все это делает для перенаправления index.html (своего рода правила Catchall):

var env = require('./env'); 
var fallback = require('express-history-api-fallback'); 
var express = require('express'); 

var app = express(); 
var config = env.config(); 
var root = __dirname + '/dist'; 

app.use(express.static(root)); 

app.use(fallback('index.html', { root: root })); 

var port = process.env.PORT || 9090; 

var server = app.listen(port, function() { 
    console.log('Server started at: http://localhost:' + port); 
    console.log(config); 
}); 

Проблема я столкнулся в том, что он успешно перенаправляет на index.html, но не загружает правильный маршрут на сторона клиента. Таким образом, запрос на www.mysite.com или www.mysite.com/anotherpage всегда будет загружать маршрут домашней страницы.

Мне явно не хватает кода для его перехвата и загрузки соответствующего маршрута на стороне клиента. Я просто не знаю, что делать.

Answer 1

Найдено, где ошибка была:

crossroads.parse ('/');

Это всегда было направлено на «домашний» маршрут. Я просто должен был отрефакторить код немного:

History.Adapter.bind(window, 'statechange', this.routeCrossRoads); 

routeCrossRoads() { 
    var state = History.getState(); 
    if (state.data.urlPath) { 
     return crossroads.parse(state.data.urlPath); 
    } 
    else { 
     if (state.hash.length > 1) { 
      var fullHash = state.hash; 
      var pos = fullHash.indexOf('?'); 

      if (pos > 0) { 
       var hashPath = fullHash.slice(0, pos); 
       return crossroads.parse(hashPath); 
      } 
      else { 
       return crossroads.parse(fullHash); 
      } 
     } 
     else { 
      return crossroads.parse('/'); 
     } 
    } 
}