In our sample data, we have specified two departments: music and books. Currently, our App parent component renders the products and the cart into a single page.

In Single Page Applications (SPA), most of the time we want to give the user the best user experience by separating parts of the app into pages. The advantages of client site routing are that the user can navigate through different URLs without loading and reloading/refreshing the pages. This great user experience comes with a price. One of the challenges for client routing is the amount of code that the application initially needs to load for all pages. This problem can be solved by splitting the code by pages/routes and lazy loading only those parts of the code for the pages that a user visits.

For this example, we'll use the react-router library to manage the client-side routing:

In total, we have six pages: