react-subrouter v0.3.1

react-subrouter

When you need to change views without changing the URL.

SubRouted Components can be in any part of your application.

There can be multiple SubRouters

API is closely aligned with react-router's (SubLink, SubRouteHandler, etc...)

Examples at react-subrouter-examples

Usage

Request Libraries

  import React from 'react';
  import {SubRoute, SubRouter, SubLink, SubRouteHandler} from 'react-subrouter';

Define SubRoutes

  var routes = (
    <SubRoute handler={Modal}>
      <SubRoute name="deposit" handler={Deposit}>
        <SubRoute name="card" handler={Card}/>
        <SubRoute name="bank" handler={Bank}/>
      </SubRoute>
      <SubRoute name="status" handler={Status}/>
      <SubRoute name="info" handler={Info}/>
    </SubRoute>
  };

Build a new SubRouter

    class Index extends SubRouter {
        constructor(props, state){
            super(props, state, routes, 'card');
        }
    }

Start building nested SubRoutes

export default class extends React.Component{
    render() {
        return (
            <div className="modal">
                <div className="tabs">
                    <SubLink to="status" className="tab three">Status</SubLink>
                    <SubLink to="deposit" className="tab three">Deposit</SubLink>
                    <SubLink to="info" className="tab three">Info</SubLink>
                </div>
                <SubRouteHandler />
            </div>
        );
    }
}