1

I have a client side router with which I can navigate through my web application with hash based urls, like http://example.com/#home. With the history.pushState(..) method I make the url more cleaner, like http://example.com/home. Now my problem is when someone reload the page, the url is unknown, because there is no hash in it. Is there a elegant way to fix this?

laser
  • 1,388
  • 13
  • 14
Chryb
  • 547
  • 1
  • 12
  • 34
  • Is it to late to use angularjs with stateProvider in your webapp? – Daniel May 11 '15 at 14:04
  • I want to implement that without any additional framework. – Chryb May 11 '15 at 14:11
  • I think the only possible solution is handle this routes on the server and perform a redirect to your spa main page with a hashed url and then do a history.pushState again – devconcept May 11 '15 at 19:21

1 Answers1

3

What it's meant for

history.pushState(..) is needed for single-page-applications to create an artificial browser history. That artificial history allows users to navigate via back and forward buttons and also to bookmark a "page" (there is only one, but it feels like multiple pages).

What you're doing

Now you're rewriting URLs to locations, which don't exist. On reload the browser navigates to that location and finds nothing, it doesn't know the relationship between your single-page-application and that new URL.

Solutions

  1. You could try to fix this by creating redirections on server-side. Then you'll be able to read the current state. There are multiple options for redirects:
  2. Keep the hashed URLs and use the saved time to work on real features.

I'd take the second option.

Community
  • 1
  • 1
Christian Strempfer
  • 7,291
  • 6
  • 50
  • 75