Невозможно выполнить маршрутизацию с pushstate и различными js-маршрутизаторами

Question

Я не уверен, хорошо ли я понимаю ситуацию с pushstate и маршрутизацией, но я застрял, пытаясь направить одностраничное приложение с использованием Pagejs или Grapnel или других подобных javascript-маршрутизаторов.

Я хочу, чтобы у меня была возможность перемещаться по моей программе и вручную вводить маршруты в адресной строке (чтобы я мог отправлять ссылки на различные части моего спа-центра третьим лицам). Я не могу перейти к маршруту /test вручную, например, с помощью приведенного ниже кода.

Ниже приведен пример с pagejs.

Я также сделал свой серверный узел nodejs для перенаправления на /#login, если он получает запрос на /login.

Как я могу использовать pushstate, чтобы я мог вводить адрес вручную в адресной строке и перемещаться по нему по ссылкам роутера и html? Что мне здесь не хватает?

Пример кода:

page('/',index);
page('/signin',signin);
page('/test',test)
page();

function index() {
  console.log('in index')
  new WelcomeView();
  console.log('rerouting');
  page('/signin');
}

function signin() {
  console.log('in signin')
  //new SigninFormView();
}

function test() {
  console.log('in test');
}

в welcome.html

click <a href="/#test">lets see</a>

в app.js (на стороне сервера)

//router redirect to webapp
app.use(function(req, res, next) {
  const redirectUrl=(req.secure ? 'https://' : 'http://') + req.headers.host +'/#'+req.originalUrl.substring(1);
  res.redirect(redirectUrl);
});

Это имеет следующие результаты:

1) переход к / я получаю страницу приветствия и журнал консоли, что он перешел к маршруту входа

2) написав ссылку вручную / войдите в адресную строку, я снова перехожу к / маршруту, который перенаправляет

3) писать ссылку вручную / # войти в адресную строку. Я снова перехожу к / route, который перенаправляет

4) кликнув по ссылке в welcome.html, снова перенаправляю меня через / route

5) щелкнув ссылку в welcome.html и изменив ее на /test works.

Answer 1

Всякий раз, когда вы (вручную или иначе, обычно путем установки window.location = 'myurl') изменить что-либо в адресной строке, браузер всегда будет делать запрос на это, на самом деле, нет никакого способа обойти это, и если бы это было так, это было бы проблемой безопасности, так как страницы могли взломать ваш браузер, не позволяя перемещаться прочь на любой другой URL. Если вы хотите иметь возможность загружать определенный URL в ваш SPA, набрав его в строке адреса, вам нужен сервер, чтобы что-то ответить. В SPA вы обычно возвращаете тот же HTML-код, который загружает ваш SPA. Теперь кажется, что Pagejs не уважает URL в адресной строке и продолжает загружать / (Я думаю, что я видел это раньше), в качестве обходного пути, вы можете попробовать установить page() в window.location.pathname когда ваше приложение загрузится, и посмотрите, исправит ли это вашу вторую проблему.

Кроме того, URL-адреса hashbang не включены по умолчанию для страницы, их необходимо включить с помощью page({hashbang: true}),