A router that simplifies the routing process when creating a single page application with vanilla js.
URL parameters can be added to the component state automatically.

Features

• Adding parameters into the component state
• Simple mapping of route to a function/class
• Updating the URL of the page based on History API
• Navigating between routes

Installation

NPM

npm install simple-vanilla-router

If you don't wish to use any bundling tools, you need to provide a path to the folder within node_modules.

CDN

https://cdn.jsdelivr.net/npm/[email protected]/lib/index.min.js;

Usage

This is an example of App component above all components.

import { browserRoute, route, redirect } from "simple-vanilla-router";

export default class App {
  constructor(props) {
    super(props);

    browserRoute(this.routes);
    this.routes();
  }

  routes() {
    route({
      path: ["/", "/web/"],
      component: ProductListPage,
      target: this.target,
      state: {
        productList: [],
      },
    });

    route({
      path: "/web/products/:id",
      component: ProductDetailPage,
      target: this.target,
      state: {
        productDetail: {},
        selectedOptions: [],
      },
    });

    route({
      path: "/web/cart",
      component: CartPage,
      target: this.target,
      state: {
        cartItems: [],
      },
    });
  }
}

In this example, the state object of the ProductDetailPage component is following.

{
  param: { id: "string" },
  productDetail: {},
  selectedOptions: []
}

The redirect triggers a custom event and then browserRoute detects it and executes the history push.

redirect("/web/cart");

You can check the examples used in the project here.

License

MIT license