Why is history.pushState() breaking my navigation functionality?

user_6326807 0
Viewed 153

I'm using history.pushState() to show a URL that indicates the dynamic content (an article) currently displayed.

If I return to my home page (index.html) after looking at some dynamic content and then try to visit another page other than index.html, my nav links become broken.

On mysite.com/articles whenever a new article is chosen I call history.pushState(null, null, '/articles/' + <articleID>);. This works correctly as I'd expect. The displayed URL becomes mysite.com/articles/articleID.

Current Behavior:

At this point, if I click a nav link to go back to index.html the page successfully changes to index.html but the displayed URL becomes mysite.com/articles/index.html

Expected Behavior

The displayed URL should become mysite.com or mysite.com/index.

So is my problem:

  1. The way I'm using history.pushState(); or
  2. The way that my navigation links are configured?
pushstate html javascript
1 Answers

Your generic redirect method redirects everything to /articles/<articleID> including the link to home page (as you mention ...articles/index.html).

While your app from a reason can resolve articles/index.html to home page (I'm not sure why). From now on, all the relative link (which not start with /) will be relative to the current path - /articles/index.html.

In order to fix this, you should exclude the homepage links from the generic redirect mechanizm and redirect to /.

user_8631100
Related