react-router-hook
Universal data fetching and lifecycle management for react-router@3 with multiple components. Inspired by redial, react-router-redial and async props.
Installation
npm install --save react-router-hook
Usage
;; const locals = dispatch: storedispatch // redux store and dispatch, you can use any locals getState: storegetState; const onAborted = { console;};const onCompleted = { console;};const onError = { console;}; const routerHookMiddleware = ; ReactDOMComponent { // the matched child route components become props in the parent return <div> <div className="Main"> /* this will either be <Groups> or <Users> */ thispropsmain </div> <div className="Footer"> /* this will either be <GroupsSidebar> or <UsersSidebar> */ thispropsfooter </div> </div> } @Component { return <div> /* if at "/users/123" this will be <Profile> */ /* UsersSidebar will also get <Profile> as this.props.children. You can pick where it renders */ thispropschildren </div> } @Component { return <div> UserFooter </div> }
On server side
;;// Other imports;app
Monitoring router status
@Componentstatic contextTypes =routerHookContext: routerHookContextShape;{superprops context;thisstate =routerLoading: false;}{if thiscontextrouterHookContextthisremoveListener = thiscontextrouterHookContext;}{if thisremoveListenerthis;}{return<div>is loading: thisstaterouterLoading</div>;}