A routing system in JavaScript for Single Page Application

🌐 Building a Simple Routing System in Vanilla JavaScript for SPAs

In the world of Single Page Applications (SPAs), managing routes without a framework can seem daunting. But with Vanilla JavaScript, you can create a simple yet powerful routing system! 🚀

Here’s a quick guide to get you started:

1️⃣ Understand the Basics of Routing

Routing in an SPA involves mapping a URL to a specific view or content. Instead of reloading the page, the app dynamically updates the content based on the URL.

2️⃣ Core Concepts

• Hash-based Routing: Uses window.location.hash (e.g., /#/home). It's simple and doesn't require server configuration.
• History API: Leverages pushState and popstate for cleaner URLs (e.g., /home).

3️⃣ Steps to Build

Step 1: Set Up Your HTML Structure

<div id="app"> <nav> <a href="#/">Home</a> <a href="#/about">About</a> <a href="#/contact">Contact</a> </nav> <div id="view"></div> </div> 

Step 2: Create the Router

class Router { constructor(routes) { this.routes = routes; this.init(); } init() { window.addEventListener("hashchange", () => this.handleRouteChange()); this.handleRouteChange(); } handleRouteChange() { const currentPath = window.location.hash.slice(1); const route = this.routes[currentPath]; if (route) { route(); } else { this.routes["/404"](); } } } // Usage const router = new Router({ "/": () => (document.getElementById("root").innerHTML = "Home Page"), "/about": () => (document.getElementById("root").innerHTML = "About Page"), "/404": () => (document.getElementById("root").innerHTML = "404 Page"), }); 

4️⃣ Enhancements

• Use the History API for cleaner URLs.
• Lazy-load content or templates for better performance.
• Add 404 and fallback routes for improved user experience.

Why Build This Yourself?

• Deep Understanding: Learn the mechanics behind routing.
• Flexibility: Customize it to your needs without the constraints of a library.
• Performance: Avoid the overhead of external dependencies.

💡 Pro Tip: If you're building a larger app, consider modularizing your code and handling edge cases like query parameters or nested routes.

Have you ever built your own routing system? Share your experience in comments! 👇