const router = <Router history={history}>
    <Route path="/" component={App}>
        // IndexRoutes are considered also
        <IndexRoute component={App}/>
	    <Route path="product/:id" component={ProductListContainer}/>
	    // HiRouter also works recursively
	    <Route path="client/" component={ClientContainer}>
	        // in the next line we use an *alias* parameter for better naming
	        <Route path=":clientId/order" component={ClientOrderListContainer} alias="ClientOrderList" />	        
	        <Route path=":clientId/order/:orderId" component={ClientOrder} />	        
	        <Route path=":clientId/order/:orderId/status" component={ClientOrderStatus} />	        
	    </Route>
	    // optional path variables are supported, too
	    <Route path="pony/(:foo)" component="{PonyFooContainer}" />	    
</Router>

// use the High Order Component (HOC) HiRouter
render( <HiRouter router={router} />, document.getElementById('root') )

class ProductListContainer extends React.Component {
	constructor(){
		super() 
	}
	
	handleSelectedProduct(id){
	    // here we can conveniently navigate to the specific component
	    // *without* knowing the underlying url.
	    // mind, that the functions accept an object where its property 
	    // names refers to variable names in the path pattern 
		context.nav.goToProduct({id:id});
		// also available are
		/*
		context.nav.goToIndex() // default		
		context.nav.goToClientOrderList({clientId: 100}) // from alias for customized naming
		context.nav.goToClientOrder({clientId: 100, orderId:1001}) // of course, multiple args!
		context.nav.goToClientOrderStatus({clientId: 100, orderId:1001})		
		context.nav.goToPony() // optional variables #1		
		context.nav.goToPony({foo:'bam'}) // optional variables #2		
		*/
	}
	
	render(){
		return <ProductList onSelectedProduct={handleSelectedProduct.bind(this)} />
	}
}

// IMPORTANT: declare the usage of hirouters navigation context.
ProductListContainer.contextTypes = {
  nav: React.PropTypes.object
};

options : {
    prefix : "goTo",
    defaultPath : "Index",
    routingImpl: (url) => { this.props.history.push(url); }
}

const router = 
  <Router history={history}>
    <Route path="/" component={App}>
        // IndexRoutes are considered also
        <IndexRoute component={App}/>
	    <Route path="product/:id" component={ProductListContainer} alias="Schawarma"/>
  </Router>

const options = {
  prefix: "mazelTov",
  defaultPath: "TohuWaBohu"
}

render( <HiRouter router={router} options={options}/>, document.getElementById('root') );

function defaultRoutingImpl(url){
	// 'this' is the react-router instance passed as HiRouters *router* property
	this.props.history.push(url);
}