Hi @jack , how can one code-split the routing using this modular method, thanks in advance
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', } };
Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink.
Hide child comments as well
Confirm
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Hi @jack , how can one code-split the routing using this modular method, thanks in advance
Good question!
We used github.com/jamiebuilds/react-loadable for code-splitting.
Here is an example of the Dashboard modules index.jsx: