From d85abf18296b83cf588193c61a0fb6a91c334246 Mon Sep 17 00:00:00 2001 From: Ardis Lu Date: Mon, 22 Jun 2026 22:53:55 -0700 Subject: [PATCH] Include forward slash in route name This change aligns the route name with the value returned from `URL.pathname` and the values given for the `href` HTML attributes. --- index.html | 42 +++++++++++++++++++++--------------------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/index.html b/index.html index 36217fd..d908acf 100644 --- a/index.html +++ b/index.html @@ -114,31 +114,31 @@
-
+

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.

+

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.

+

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.

+

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.
    • @@ -146,23 +146,23 @@
  • 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 404 errors (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.
    • +
  • 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 40 total lines of JavaScript using the Navigation API (new as of January 2026).

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.

+

Or click here to go back to /page_3.

-

Click here to go to /long_page_2.

+

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.

+

Click here to go back to /long_page_1.

@@ -173,8 +173,8 @@ // Display the appropriate page based on the URL path (does NOT modify browser history) function showPage(path) { - if (path === '' || path === 'index.html') { - path = 'home'; + if (path === '' || path === '/' || path === '/index.html') { + path = '/home'; } let match = false; @@ -202,14 +202,14 @@ const url = new URL(e.destination.url); e.intercept({ handler() { - showPage(url.pathname.substring(1)); + showPage(url.pathname); // Must reset scroll otherwise a user entering a long page from another long page will enter midway scrolled scroll(0, 0); } }) }) - showPage(location.pathname.substring(1)); + showPage(location.pathname); -- 2.47.3