DEV Community

Discussion on: Organizing Your React App Into Modules

Collapse
 
webpest profile image
Abayomi Oloyinde

Hi @jack , how can one code-split the routing using this modular method, thanks in advance

Collapse
 
jack profile image
Jack Williams

Good question!

We used github.com/jamiebuilds/react-loadable for code-splitting.

Here is an example of the Dashboard modules index.jsx:

import React from 'react';
import Loadable from 'react-loadable';
import DashboardIcon from 'Components/shared/Icons/DashboardIcon';
import ScreenLoader from 'Components/shared/ScreenLoader';

const Dashboard = Loadable({
  loader: () => import('./Dashboard'),
  loading: ScreenLoader
});

export default {
  key: 'dashboard',
  routeProps: {
    path: '/dashboard',
    component: Dashboard
  },
  navigation: {
    permission: [],
    icon: (active, theme) => (
      <DashboardIcon
        style={{
          color: active ? theme.palette.dashboard[400] : theme.palette.contrast.low,
          width: 26,
          height: 26
        }}
      />
    ),
    label: 'Dashboard',
    link: '/dashboard',
    theme: 'dashboard',
  }
};