From: Ardis Lu Date: Fri, 30 Sep 2022 05:16:15 +0000 (-0700) Subject: Add styling and content X-Git-Url: https://git.ardis.lu/?a=commitdiff_plain;h=1c84f0767fdedacb205534a55614c6efd1cb749e;p=minimal-routing Add styling and content --- diff --git a/index.html b/index.html index d4cf2cb..a848065 100644 --- a/index.html +++ b/index.html @@ -6,34 +6,119 @@ minimal-routing +
- Go to the home page - Go to page 1 - Go to page 2 - Go to page 3 +

minimal-routing

-
- Hello from the home page! -
-
- Hello from page 1! -
-
- Hello from page 2! -
-
- Hello from page 3! -
+ + +
+
+

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 signature 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.
    • +
  • Invalid routes need to return HTTP 404 errors (this behavior is critical for SEO).
    • +
+

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.

+
+