To install npm i react-chronicle-router --save-dev

This is a router implementation for ReactJS that fully supports HTML5 History API and Isomorphic applications. The goal of this router was to full support React .14 as well as provide easy use of state exchange and property control.

Usage:

Step 1 Create a routes.js file
This file will contain your routes (for both the server and the client) as well as your rendering method on the client-side.
key is required and must be unique - this is required by ReactJS rendering engine.
path is your path
component is your component - you will need to import them into your route.js file.
Routes may be nested however your like, just follow the same settup with {this.props.children} as seen in the Application.jsx below anywhere you nest.
``
import { Route, matchRoute, prepareRoutes, updateRoutes } from 'react-chronicle-router';

var routes = (





);

/**
* Client Rendering Function
*
* state is a json representation of your flux stores - this example demonstrates with AltJS
* location is the path you would like to render - it can be null and the history module will then default to the browser
* location bar.
* container is the document.getElementById('content') node object of your div you intend to render to.
* invalid page may be null or can be a page to display if things go terribly wrong.
*/
exports.renderClient = function(state, location, container, invalidPage) {
if(typeof window !== 'undefined') {
// We inflate our flux containers here from AltJS
var jsonHandle = new jsonHandler(state);
if(jsonHandle.countKeys()>0) { // If 0 then there are no stores to inflate - basically a little routine to go through JSON keys.
alt.bootstrap(state);
}

// Best practice to avoid memory leaks in React - unmount existing
ReactDOM.unmountComponentAtNode(container);

// This is the routing magic - This method builds our route table based on the criteria provided.
/**
* We pass JSON representing the criteria we want available to our routes.
* routes is required, this is simply the routes we defined above.
* location may be omitted - defined above
* container is required - defined above
* post may be omitted, If we have any query params in our post we would like to send - mostly useful for server-side
* state may be omitted, This is defined above.
*/
matchRoute({routes: routes, state:state, container:container, location:location}, (chronicle, routeStatus, routes) => {
// Match results in a callback with an object representing our history, a routeStatus object and a reference to our routes
// routeStatus has a lot of data in it - right now we will focus on status - 200 is HTTP for good to go - more on this on the server-side.
if(routeStatus.status === 200) {
if(React.isValidElement(routes)===false) { // Make sure routes elements are still valid
if(typeof invalidPage !== 'undefined' && invalidPage !== null) {
ReactDOM.render(invalidPage,routeStatus.container);
}

return false;
}

/**
* Step 2: prepareRoutes
*
* This method simply applies the collected properties setup from
* the result of matchRoutes and applies it to our route descriptors
* essentially building a model representing our routing structure.
*/
var preparedRoutes = prepareRoutes(routes, routeStatus);
if(preparedRoutes === undefined) {
if(typeof invalidPage !== 'undefined' && invalidPage !== null) { // Make sure our routes are still valid
ReactDOM.render(invalidPage,routeStatus.container);
}

return false;
}

if(React.isValidElement(preparedRoutes)===false) { // Make sure our routes are still valid
if(typeof invalidPage !== 'undefined' && invalidPage !== null) {
ReactDOM.render(invalidPage,routeStatus.container);
}

return false;
}

/**
* Optional Step 3: updateRoutes
*
* This method offers us an opportunity to update the properties of any
* of our routes. This is a great way to pass state or additional properties.
* This method is completely optional.
* For simplicity we wont call it today.
* updateRoutes(routeStatus, components, props)
*/

// Render our routes
ReactDOM.render(preparedRoutes,routeStatus.container);
}
});
}
};

export default routes;
`
Here is an example client.js file in an Isomorphic APP
`
main();

function main() {
if(typeof window !== 'undefined') {
window.onload = function() {
Iso.bootstrap(function (state, container) { // I use ISO with AltJS for my flux transfer from the server - so nice
renderClient(state, null, document.getElementById("content"), null);
});
};
}
}
`
Here is my Application.jsx
`
class Application extends React.Component {
constructor(props) {
super(props);

this.state = {
};
}

componentDidMount() {
// Make sure to mount our history - its easy as its assigned as a prop from our routing machine.
/**
* alt.takeSnapshot is AltJS being awesome and providing a simple method to create JSON from my FLUX stores.
* cfg.application.title is the title of my application
* this.onRoute is a callback I use for seemlessly overriding links to ensure lazy rendering occurs instead of
* follow-up server requests for pages - more on this later - it also takes care of history for us.
* this.onBackButton is a callback to handle the browser back and forward buttons
*/
this.props.chronicle.mountHistory(alt.takeSnapshot(), cfg.application.title, this.onRoute, this.onBackButton);
}

componentWillUnmount() {
// Clean up when you are done - if you don't those window events with history can get nasty!
this.props.chronicle.unmountHistory();
}

componentDidUpdate(prevProps, prevState) {
}

onRoute = (e) => {
// Look I am calling the same method from my routes.js file I called from the client.js
renderClient(alt.takeSnapshot(), null, document.getElementById("content"), null);
}

onBackButton = (e) => {
// Look I am calling the same method from my routes.js file I called from the client.js, one diff here - I am using the event state because I am going backward or forward!
renderClient(e.state, null, document.getElementById("content"), null);
}

// Just add {this.props.children} and routing will do the rest for us. Anything else you want to add to this component outside of that
// Will be free from routing and persistant - maybe add a nice permanant navbar - check out react-bootstrap!
render() {
return (