From 1c84f0767fdedacb205534a55614c6efd1cb749e Mon Sep 17 00:00:00 2001 From: Ardis Lu Date: Thu, 29 Sep 2022 22:16:15 -0700 Subject: [PATCH] Add styling and content --- index.html | 121 +++++++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 103 insertions(+), 18 deletions(-) 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.

+
+