https://github.com/onthegosystems/micro_router

Simple pure JS router
https://github.com/onthegosystems/micro_router

Last synced: about 1 month ago
JSON representation

Simple pure JS router

• Host: GitHub
• URL: https://github.com/onthegosystems/micro_router
• Owner: OnTheGoSystems
• Created: 2019-04-04T15:33:10.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2019-04-09T09:21:33.000Z (over 5 years ago)
• Last Synced: 2024-09-16T04:07:59.350Z (3 months ago)
• Language: JavaScript
• Size: 94.7 KB
• Stars: 0
• Watchers: 4
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# MicroRouter

## Simple and minimalistic pure JS router for clientside

# Usage example

```js

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 (

      


        {  }

      

    );

  }

}

```


To change router state use the folowing syntax`MyRouter.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