This sample App shows how to build dynamic modules loading on demand along with redux and react-router v.4.
To run the sample follow this steps:
- Clone repo
- Run
npm i
inside the root folder - Run
npm start
The app has the only single route defined at the beginning that navigates to the Home page at /
.
All of the navigation routes are requested from a local server running on node.js
By checking the Dashboard module checkbox, App will call the node.js to update the routing and enable the dashboard module. This will be reflected by additional route added, called 'Dashboard'.
After pressing on the 'Dashboard' link, it will download the Dashboard module and will register reducers from it to redux. This can be seen using developers tools of the browser.
If you will go be to the Home page and uncheck the 'Dashbord' checkbox to the route will disappear from navigation and module will not be available until the checkbox will be set again.
Let's pretend we want to add another module, called 'Accounts'
- Add another folder to modules, name it
accounts
. - The index.js file should have a similar structure to
dashboard
example module, it is VERY important as this structure is expected by the system. - Use the same naming for the module as for the folder
accounts
. It should export an object with reducers and root view of the module along the name field. - Then go to the server.js and add another object to routes array like this:
{
url: '/accounts', // the expected navigation url
name: 'accounts', // the name of the module, it should equal to the folder name we defined in step 1
value: 'Accounts', // This will be used as a display name for the tab inside the navigation
isEnabled: false, // this tells the UI whether this link should be displayed inside the navigation menu
}
In case if something isn't working it means that you defined module incorrectly or got wrong with some of the naming described above.