React State Router
Flexible router for ReactJS applications.
Overview
The goal of the React State Router is to simplify routing in ReactJS applications. The main premise of the React State Router is that it is uses serialized router state as a route. Because this approach doesn't rely on predefined list of routes, it allows great flexibility in view composition.
Installation
You can install the React State Router as a npm package
npm install react-state-router
Sample Usage
Views that need to get or set a router state should use StateRouterMixin.
PageSidebar.jsx
var React = ;var StateRouterMixin = ; var PageSidebar = React; moduleexports = PageSidebar;
PageContent.jsx
var React = ;var MailBoxPage = ;var ContactsPage = ;var StateRouterMixin = ; var PageContent = React; moduleexports = PageContent;
Application needs to initialize StateRouter.
App.jsx
var React = ;var StateRouter = ;var PageSidebar = ;var PageContent = ; var App = React; moduleexports = App;
Child Router States
There are scenarios when a view needs to maintain its own router state without affecting parent view router state.
For example, an application will set 'contacts' as the currently selected page in the router state.
router { page: 'contacts' }
Then the 'contacts' page would want to set 'abcd' as the contactID of the currently selected contact. Since the 'contacts' page is not aware of the parent router state, it would overwrite parent state and effectively remove 'page' from the router state.
router { contactID: 'abcd' }
To prevent this behavior, views that maintain their own state need to be placed inside StateRouterView.
PageContent.jsx
var React = ;var MailBoxPage = ;var ContactsPage = ;var StateRouterView StateRouterMixin = ; var PageContent = React; moduleexports = PageContent;
Now, when the 'contacts' page sets contactID in the router state, it will do so inside a child router context.
router { page: 'contacts' contacts: // this is a child router context contactID: 'abcd' }
And when a user clicks on menu to see the mailbox page, the entire state will be overwritten like this:
router { page: 'mailbox' }