@moleculejs/molecule-router

MoleculeRouter

Overview

MoleculeRouter allows for easily creating Single Page Applications (SPAs) with Web Components. It is currently still experimental.

Installation

The @moleculejs/molecule-router package can be installed using npm or yarn:

npm install --save @moleculejs/molecule-router

yarn add @moleculejs/molecule-router

Documentation

See the full documentation at MoleculeJS.org.

Examples

To use MoleculeRouter we have to create one, ideally at your app's root:

import { Router } from '@moleculejs/molecule-router';

class MyApp extends MoleculeJsx.Element {
  // ...

  connected() {
    this.router = new Router(this);
  }

  // ...
}

Next we add some Links and Routes for basic matching:

import { Router, Link, Route } from '@moleculejs/molecule-router';

import { Home, About, Topics } from './my-views';

class MyApp extends MoleculeJsx.Element {
  // ...

  connected() {
    this.router = new Router(this);
  }

  render() {
    return (
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/topics">Topics</Link>
          </li>
        </ul>

        <hr />

        <Route exact path="/" element={Home} />
        <Route path="/about" element={About} />
        <Route path="/topics" element={Topics} />
      </div>
    );
  }
}

Contributing

Coming soon!