神刀安全网

Patch react-router's Route components with static hook methods onEnter/onLeave.

react-router-hooks-patch

Patch react-router's Route components with static hook methods onEnter/onLeave. Patch react-router's Route components with static hook methods onEnter/onLeave.

Patchreact-router’sRoute components with static hook methods onEnter / onLeave .

Install

npm install react-router-hooks-patch --save

Usage

patchRouteHooks(Route: <Route>, data: ?Object) ;

  • Route -Route or array orRoutes which component you want to patch with static onEnter / onLeave methods. Children routes will be patched too.
  • data – pass data that you need in your methods. It’s perfect place for instances of some sort of data abstraction (e.g. Flux/Redux in universal apps). **Passed data object will be the first argument in onEnter / onLeave functions.

Requirements

Patch works only with latest react-router version ( >= 2 , seeupgrade guide);

Example

import React from 'react'; import ReactDOM from 'react-dom'; import Route from 'react-router/lib/Route'; import browserHistory from 'react-router/lib' import patchRouteHooks from 'react-router-hooks-patch'; import Flux from '../path/to/flux'; // or any data abstraction  class App extends React.Component {     static onEnter({ flux }, nextState, replace, done) {         // do some async actions and call done when you're ready         done();     }      static onLeave({ flux }) {         // receives only passed data object as argument     }      render() {         return <div>...</div>;     } }  const routes = (     <Route path="/" component={App}>         <Route path="about" component={About} onEnter={({ flux }) => {             // methods on Route also get patched         }} />         <Route path="users" component={Users} />     </Route> );  const flux = new Flux(); const patchedRoutes = patchRouteHooks(routes, { flux });  ReactDOM.render(     <Router history={browserHistory} routes={patchedRoutes} />,     document.getElementById('app'); );

NOTE: You can check the detailed application example with server-rendering and patching routes in thisrepo.

MIT Licensed

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » Patch react-router's Route components with static hook methods onEnter/onLeave.

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
分享按钮