MicroRouter

Simple and minimalistic pure JS router for clientside

Usage example

import { MicroRouter } from "@tarvit/micro_router";

// define router
const MyRouter = new MicroRouter('state_view_router_state', MicroRouter.modes.windowHash);

// draw your routes
MyRouter.setDefaultRoute('notification/example');
MyRouter.addRoute('dashboard', StateDashboard); // StateDashboard is your ReactComponent.
MyRouter.addRoute('notification/:text', StateNotification); // StateNotification is another your ReactComponent.

// create nav helpers (optional)
MyRouter.nav = {
  toDashboard: () => {
    MyRouter.navigate({ view: StateDashboard});
  },
  toNotification: (message) => {
    MyRouter.navigate({ view: StateNotification, text: message})
  }
};


// create root component
import React, { Component } from 'react';

export default class AppRoot extends Component {
  constructor(props) {
    super(props);
    
    // enable automtical route resolving
    MyRouter.bindToWindowHash();

    // define default state
    this.state  = {
      viewState: MyRouter.currentState()
    };

    // subscribe to updates
    MyRouter.afterNavigate(()=>{
      this.setState({
        viewState: MyRouter.currentState()
      })
    });
  }
  
  // render corresponding component
  render() {
    const V = this.state.viewState.view;
 
    return (
      <div>
        { <V {...this.state.viewState} /> }
      </div>
    );
  }
}

To change router state use the folowing syntaxMyRouter.navigate({ view: StateNotification, text: message}) or MyRouter.navigatebyPath('notification/your-text-here')

Commands for development

install dependencies

$ yarn

test

$ yarn test

build

$ yarn build

release

$ npm publish