Getting started: Your first setup

Simplr Router works by matching url pathing with Custom Element views.

Simplr Router aims to provide developers a quick-to-setup but configurable routing setup for projects of all size.

import { SimplrRouter } from "@simplr-wc/router";
import "./minimal-setup.js";
import "./example-view.js";
import "./dynamic-view.js";

const routes = [
  { path: "", component: "minimal-setup" },
  { path: "example", component: "example-view" },
  { path: "dynamic/:id", component: "dynamic-view" },
];

new SimplrRouter({ routes }).init();

The Router sets itself up as you call init() on the router instance. While setting up, the router starts listening for navigation events on the page and navigates with it's routing where possible.

You don't need to create custom navigation methods. Simplr Router overrides the default action of anchor tags when the navigation target is listed as a route.