react-router-dispatcher-chunk
v2.3.0
Published
react-router-dispatcher action for react-chunk dynamic imports
Downloads
6
Maintainers
Readme
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