HiRouter

__HiRouter__ is a React High Order Component for the famous React Router for a even better routing experience.

``
npm install react-hirouter --save
`

__HiRouter__ is capable to create convenience navigation functions.
The idea is to keep the urls centralized (on your routers configuration) and using
functions like _goToOrder({orderId:1001})_ instead of pushing the URLs manually to the routers
history (usually like this _router.push('/order/1001')_ )

__HiRouter__ creates the navigation functions _automagically_, with arguments and names according to the
route patterns, i.e.

bats/:hardly/hit/:balls/crazy turns into goToBatsHitCrazy({hardly:value1, balls:value2})

Advantage:
- Centralized route definitions (better maintainability)
- More expressive navigation (always nice)
- Comfort (good for our lazy souls)

Example

Example:

This is a typical routing tree for react-router. Once defined your routes,
you simply pass the router as parameter to the HiRouter.
Using Reacts context declaration enables you to access the created navigation functions.

`js
const router =

// IndexRoutes are considered also


// HiRouter also works recursively

// in the next line we use an alias parameter for better naming




// optional path variables are supported, too



// use the High Order Component (HOC) HiRouter
render( , document.getElementById('root') )
`

Inside _ProductListContainer_ you can access convenient routing/navigation functions

`js
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
}
}

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

`

Options

__HiRouter__ allows some tweaking.

Currently, options for function naming but also for routing internals are available.
Available options are:

- prefix : changes the first naming part of the navigation function
- defaultPath : changes the second naming part of IndexRoute functions
- routingImpl: a function used for routing (usually, you won't use this)

The default options are:

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

Suppose, we configure our HiRouter like this


`js
const router =


// IndexRoutes are considered also




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

render( , document.getElementById('root') );
`

then HiRouter creates the following navigation functions:

- mazelTovTohuWaBohu()
- mazelTovSchawarma({id:'bla'})

$3

The default routing function can be exchanged by a customized routing function, for whatever reasons.
Its current default implementation simply pushes the url to the react-routers history - So, no rocket-science here.

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