Hello from the home page! 🏠
This is the page at the root of the website.
Click here to go to /page_1, which is a completely different page from this one.
As promised, this is a completely different page.
Look at the URL path - it changed.
But this page loaded instantly. If you observe the network tab in DevTools, no network requests have been made.
And if you observe the DOM, only this <article> tag has changed.
How does this work? Click here to go to /page_2 and find out.
All the routing logic has been implemented client-side in JavaScript.
We've actually never left the root index.html page - check the source.
This behavior is the eponymous characteristic of an SPA.
Click here to go to /page_3 and learn more.
There are a few important behaviors that are often overlooked when implementing client-side routing:
- The backward and forward buttons need to work as expected.
- Direct links to specific pages need to work.
- Middle click, Ctrl / Cmd click, Shift click, and "right click > open link in new tab" all need to work on links and link-like buttons as expected.
- Invalid routes need to return
HTTP 404errors (this behavior is critical for SEO). - When hovering links and link-like buttons, the web browser's native status bar (typically shown at the bottom-left of the window) needs to show the destination address.
- When navigating between long pages with scrollbars, the scroll should reset to the top of the page. Click here to see a demo.
The purpose of this website is to isolate the problem of client-side routing and provide a minimal reference implementation for it.
All the behaviors above have been implemented for this website in about 50 total lines of JavaScript.
Click here to view the source code on GitHub.
This page is intentionally oversized. Scroll down to go to /long_page_2.
Or click here to go back to /page_3.
Click here to go to /long_page_2.
The scroll should have been reset to the top when you entered this page.
Single-page apps that do not explicitly implement this behavior would have you enter this page with the scroll bar already scrolled down (to match your scroll on /long_page_1).
Click here to go back to /long_page_1.