Modify the App by Parsing URLs and Using Their Components

Having established some working knowledge about how Location and Link components work, we want to use this in our app. The plan is to do the following:

• Add 169 new pages using three callbacks and adding a few new layout elements.
• The user will have a drop-down menu of countries to choose from.
• Selecting a country modifies the URL, which will render the country layout.

This layout will include a heading, a chart, and a table about the country in the URL. The illustration below shows a sample of a country page that we’ll build:

We now have a template for a country page. This was triggered because the URL contained a country that is one of the available countries in the dataset. Otherwise, it will display the main app, containing all the components that we have built so far. Users can also click on the “Home” link to go there.

First let’s see how to restructure our app.

Restructuring our app to cater to multiple layouts

At this stage, we haven’t moved from the basic structure that we discussed earlier. The table below shows a simplified representation of the current structure:

Everything will remain the same with the exception of the layout part. Right now, we only have one layout attribute, and everything was added to the main div. We used tabs to efficiently utilize space in some cases, and ...