Router

On the web, the term router can refer to different concepts depending on the context:

  • For the network layer, a router is a networking device that decides where to direct data packets.

  • For a single-page application (SPA) in the application layer, a router is a library that decides what web page is presented by a given URL. This middleware module is used for all URL functions, as these are given a path to a file that is rendered to open the next page.

    The concept of routing in SPAs has evolved significantly over the years. See the Brief history of hash-based SPA routing section.

  • In the implementation of an API in a service layer, a router is a software component that parses a request and directs or routes the request to various handlers within a program. The router code usually accepts a response from the handler and facilitates its return to the requester.

Brief history of hash-based SPA routing

Early SPAs could not change the path part of the URL without reloading the page. To work around this, developers used hash-based routing, which stores the route in the "fragment identifier", the portion of the URL that follows the symbol #. The part following # was used to determine the view to render. Common patterns included #/profile and #!/profile. The code continually checked window.location.hash (or listened for the hashchange event when it was supported later) to detect fragment changes during user navigation; the SPA then updated the view whenever the fragment changed.

Though this approach needed no server setup, it had limitations: Back/Forward support was limited, pages with hash-based URLs were not indexed properly (search engines ignored the fragment), and the URLs looked messy.

By 2012, all major browsers (Chrome 5, Safari 5, Firefox 4) supported the History API. SPAs could now call pushState(), replaceState(), and the popstate event to manipulate the browser's history stack, switch to paths such as /profile directly, and update the view without a full reload. This also allowed for cleaner URLs without hash fragments.

Hash-based routing is now considered a legacy technique. It is used, if at all, only as a fallback for very old browsers or for static hosts where server-side routing cannot be configured.

See also