react-router-dispatcher-chunk

Pre-loads react-chunk dynamic route imports for client rendering.

This makes it easy to:

• configure code splitting for routes
• use dynamically loaded route components with static methods

Usage

This package is intended to be used with react-router-config and react-router-dispatcher.

// aboutRouteChunk.js
import React from 'react';
import { chunk } from 'react-chunk';
 
// Dynamically imported route component
const AboutRouteChunk = chunk(() => import('./aboutRoute'))();
 
export default AboutRouteChunk

Define the application routes using react-router-config.

// routes.js
import Root from './rootRoute';
import AboutRouteChunk = from './aboutRouteChunk';
import {routeChunk} from 'react-router-dispatcher-chunk';
 
// react-router-config routes
const routes = [
  { component: Root,
    routes: [
      { path: '/',
        exact: true,
        component: Home
      },
      {
        // the client will pre-load the about chunk BEFORE rendering the route
        path: '/about',
        component: routeChunk()(AboutRouteChunk)
      }
    ]
  }
]
 

Configuring the dispatcher action using react-router-dispatcher.

IMPORTANT: if using CHUNK, it must be the first configured route action.

import { createRouteDispatchers } from 'react-router-dispatcher';
import { CHUNK } from 'react-router-dispatcher-chunk';
import routes from './routes';
 
const {
    UniversalRouteDispatcher,
    ClientRouteDispatcher,
    dispatchClientActions,
    dispatchServerActions 
} = createRouteDispatchers(routes, [CHUNK]);
 

Install

react-chunk is a peer dependency and must also be installed.

NPM

npm install --save react-chunk react-router-dispatcher-chunk

Yarn

yarn add react-chunk react-router-dispatcher-chunk

API

routeChunk(options)

Options

getChunkLoaderStaticMethodName?: string: Optional

• Optional, the static method name used to retrieve the chunk loader from the route component(s)

Contribute

For questions or issues, please open an issue, and you're welcome to submit a PR for bug fixes and feature requests.

Before submitting a PR, ensure you run npm test to verify that your coe adheres to the configured lint rules and passes all tests. Be sure to include unit tests for any code changes or additions.

License

MIT