Nationwide Polamorous Matrimony

    router-resolver

    2.0.0 • Public • Published

    Router Resolver

    A custom RouterContext for React Router to resolve data (data loading) use Promise.

    Installation

    NPM

    npm install --save router-resolver

    Bower

    bower install --save router-resolver

    Usage

    // app.js
    //...
    import {RouterResolver} from 'router-resolver';
    //...
    const routes = {
      path: '/',
      component: App,
      indexRoute: {
        component: require('components/pages/PageHome')
      },
      childRoutes: [
        require('./routes/Example1Route'),
        require('./routes/Example2Route'),
        require('./routes/Example3Route')
      ]
    };
     
    const renderInitial = () => {
      return <div>Loading...</div>;
    };
     
    const onError = (error) => {
      console.log('Error: ', error);
    };
     
    ReactDOM.render(
      <Router routes={routes}
        history={history}
        render={props => (
          <RouterResolver {...props} renderInitial={renderInitial} onError={onError}/>
        )}/>,
      document.getElementById('app')
    );
    // components/pages/PageExample1.js
    import React from 'react';
    import Document from 'components/common/Document';
     
    class PageExample1 extends React.Component {
      static resolve() {
        return new Promise((resolve) => {
          setTimeout(() => {
            resolve('simple data');
          }, 2000);
        });
      };
     
      static propTypes = {
        response: React.PropTypes.string.isRequired
      };
     
      render() {
        return (
          <Document title='Example1 | Router resolver' className='page-ex-1'>
            <h1>Example 1: {this.props.response}</h1>
          </Document>
        );
      }
    }
     
    export default PageExample1;

    Please see example to get more info.

    • renderInitial (https://github.com/vn38minhtran/router-resolver/blob/master/example/app/app.js#L35)
    • Multiple promise (https://github.com/vn38minhtran/router-resolver/blob/master/example/app/components/pages/PageExample3.js#L5)
    • Show ProgressBar when resolving (https://github.com/vn38minhtran/router-resolver/blob/master/example/app/components/App.js#L26)

    Demo

    View demo or example folder.

    Install

    npm i router-resolver

    DownloadsWeekly Downloads

    1

    Version

    2.0.0

    License

    MIT

    Last publish

    Collaborators

    • minhtranite
    • vn38minhtran