DEV Community

Dhruvang Gajjar
Dhruvang Gajjar

Posted on

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>
Enter fullscreen mode Exit fullscreen mode

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"),
});

Enter fullscreen mode Exit fullscreen mode

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! πŸ‘‡

πŸ‘‹ While you are here

Reinvent your career. Join DEV.

It takes one minute and is worth it for your career.

Get started

Top comments (0)

Cloudinary image

Zoom pan, gen fill, restore, overlay, upscale, crop, resize...

Chain advanced transformations through a set of image and video APIs while optimizing assets by 90%.

Explore

πŸ‘‹ Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay