View Routing

Introduction to the view routing mechanism

Now that we have both the landing page and book list as independent components, we still have to determine which one to show at any given time.
We’ll continue looking into the app.py module.

Since the value of the booksShow state variable determines whether we should show the LandingPage component or the BookList component, we can use that to assign a pseudo URL path that will be further used for view routing that gives us a bit of context to a given route. With that, we can route views in Flask based on the URL.

Next, let’s look into a Python dictionary that uses these routes as keys and the React component that we want to show as the value. We can create a kind of switch statement view routing mechanism that is extensible, allowing us to add additional view component options later. So, to show the desired view, we can use the pseudo URL path as a key to look up the appropriate view component in the router dictionary.

As the App component is effectively the entry point and container of our entire client application, it keeps the outer theme-component in place regardless of which view to show since that is utilized application-wide. With all that refactoring, we now have a UI with a menu navigation option and componentized views.