react-lil-router

react-lil-router is a router component for React.js.

It relies on Hasher to parse the url hash and track the browser state history.

react-lil-router:

• updates the DOM via React (it's a pure React component)
• does not break the browser's back and forward navigation
• utilizes url hashes, i.e, #home.

Getting Started

npm i react-lil-router

import React from 'react';
import Router from 'react-lil-router';
// import some components to compose your routes
 
class Routes extends React.Component {
 
  render() {
    switch(this.props.route){
      case 'item':
        return <Item itemId={this.props.params[0]} />
      default:
        return <Home />
    }
  }
}
 
React.render(
  <Router>
    <Routes />
  </Router>, document.getElementById('app')
);
 

Router Component

When you wrap a component with the Router opponent, you have access to the url information in this.props.

this.props.route is a string. It is the first token of the url after the hash.

this.props.params is an array. It holds the rest of the url tokens.

For example:

url	this.props.route	this.props.params
/#home	'home'	[]
/#item/123	'item'	['123']

You can react to this url data at the top of the app to compose routes as you see fit.

The router is invisible to the rest of the app below. You don't need anything special to link another route, just a normal anchor tag will work:

<a href="#home'>Home</a>

You can use javascript in your handle functions as well:

window.location.hash = 'account';