Published on
·3 min read

A Brief Discussion on Front-End Hash and History Routing

#frontend#english

Introduction

In modern web development, client-side routing has become a crucial aspect of building single-page applications (SPAs). Two common methods for handling client-side routing are hash routing and history routing. This article explores the differences between these two approaches, their advantages, and their limitations.

Hash Routing

Hash routing uses the URL fragment identifier (the part of the URL starting with #) to manage navigation. When the hash part of the URL changes, the browser does not reload the page but triggers the hashchange event, allowing the application to update the view accordingly.

How Hash Routing Works

A typical URL using hash routing might look like this:

- http://xxx.com/#/home
- http://xxx.com/#/about

In this example, /home or /about is the route managed by the client-side application. The # symbols ensures that the browser treats everything after it as a fragment, which doesn't trigger a full page reload.

When the hash of the page changes, it triggers the hashchange event. This type of routing does not send a request to the server and does not require server-side support.

window.addEventListener('haschange', () => {
  // todo
  // listen hash change & trigger browser go or back
})

History Routing

History routing leverages the HTML5 History API to manage navigation. This approach allows developers to manipulate the browser's history stack without reloading the page, providing cleaner URLs and better integration with browser navigation features.

How History Routing Works

Different from the hash route above, this is a typical URL using history routing:

- http://xxx.com/home
- http://xxx.com/about

This looks pretty neat. The History API's pushState and replaceState methods are used to change the URL and update the view without triggering a full page reload.

History Routing: Listens for changes in the URL path and requires support from both the client and the server.

  • back(): Navigates back to the previous route.
  • forward(): Navigates forward to the next route, if there is one.
  • go(number): Navigates to any specified route. Positive numbers move forward, negative numbers move backward.
  • pushState(obj, title, url): Navigates to the specified URL without refreshing the page.
  • replaceState(obj, title, url): Replaces the current route with the specified URL without refreshing the page.

Conclusion

Both hash routing and history routing have their own sets of advantages and limitations. Hash routing is simpler and more compatible with older browsers, making it a good choice for smaller applications or projects where SEO is not a primary concern. On the other hand, history routing offers cleaner URLs and better SEO, making it suitable for larger, more complex applications where user experience and search engine visibility are important.

Ultimately, the choice between hash routing and history routing will depend on the specific needs of your project. Understanding the differences between these methods and their implications can help you make an informed decision and build more effective web applications.

I hope these can help you~

References