Cannot perform routing with pushstate and various js routers

Question

I am not sure if I understand well the situation with pushstate and routing but I am stuck trying to route a single page app using either pagejs or grapnel or other similar javascript routers.

What I want is to be able to navigate through my program and through manually entering routes in the location bar (so I can send links to various parts of my spa to third parties). I cannot navigate manually to the /test route for example with the below code.

The following is an example with pagejs .

I have also made my nodejs backend to redirect to /#login if it gets a request for /login.

How can I utilize pushstate so that I can both enter a manual address in the location bar and navigate through it from the router and html links? What am I missing here?

Some sample code:

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');
}

in welcome.html

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

in app.js (server side)

//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);
});

This has the following outcomes:

1) navigating to / I get the welcome page and a console log that it has navigated to the signin route

2) writing the link manually /signin in the location bar I again navigate to the / route which redirects

3) writing the link manually /#signin in the location bar I again navigate to the / route which redirects

4) clicking the link in the welcome.html again redirects me through the / route

5) clicking the link in welcome.html and changing it to /test works .

Answer 1

Whenever you (manually or otherwise, usually by setting window.location = 'myurl' ) change anything in the address bar, the browser will always make a request for that, afaik there is no way around it, and if there was, it would be a security issue, as pages could hijack your browser, by not allowing to navigate away to any other url. If you want to be able to load a particular url in your SPA by typing it in the location bar, you need the server to respond with something. In an SPA, you would typically return the same html that loads your SPA. Now, it seems like pagejs doesn't' respect the url in the location bar, and keeps loading / (I believe I've seen that before), as a workaround, you can try setting page() to window.location.pathname when your app loads, and see if that will fix your second issue.

Also, hashbang urls, arent enabled by default with page, you need to enable them with page({hashbang: true}) .