This video is available to students only

Navigation in complex apps

In this module we'll explore the third party React Router library to add a routing and navigation system to our applications.

Navigation in complex apps#

As we’ve already discovered, frameworks and libraries such as React are referred to as Single Page Applications (SPAs). The very nature of an SPA means that the application deals with a single page. There is no navigation associated with it.

However, this creates a problem. As our applications grow in size and complexity, it is imperative that we employ some sort of navigation mechanism to get around them. This is vital for many reasons, but the two most important are:

  1. It allows us to better define distinct areas of responsibility within the app, separating them out into smaller areas that can be better managed and maintained

  2. It helps our users to get around our apps via a central navigation system and even bookmark favorite areas using friendly URLs (e.g. ‘/’)

Let’s take a brief look at some examples in the wild where some self-contained, otherwise single page applications employ navigation and how essential it is.

Amazon’s AWS console#

Amazon’s AWS console, whilst not built using React, is for all intents and purposes a web-application that looks and feels very similar to an SPA. It is a self-contained management application for administering various AWS services.

Amazon's AWS console dashboard

However, the take-away point here is that if we were to build this using a library like React, it would quickly become impossible to manage the code base without some navigation to break up the many areas of responsibility that the different services offer.

Another good example that is actually React-based is the wonderful website. Although the look and feel is that of a traditional website, the Dev platform is built upon React and makes heavy use of navigation and URL routing.

Although browsing around the Dev site might feel like you’re using a regular website, you can see there are many different areas to explore:

  • Browsing articles

  • Reading individual articles

  • Account management and profile editing

  • Creating posts and articles

  • …and much more

Again, even though this is less complex than the AWS console, having all of this functionality crammed into a single page would be a nightmare for everyone involved (both users and us developers).

(Just in case you’d like to find me on Dev, my profile is @kendalmintcode)


This page is a preview of Beginner's Guide to Real World React

No discussions yet