Beginner's Guide to App Navigation [with examples]

[00:00 - 00:12] Module 8 - Navigation in Complex Apps As we've already discovered frameworks and libraries such as Reactor referred to as Single Page Applications or SPA's. The very nature of an SPA means that the application deals with a single page.

[00:13 - 00:16] There is no navigation associated with it. However, this creates a problem.

[00:17 - 00:35] As our applications grow in size and complexity, it is imperative that we'll need to employ some sort of navigation mechanism to get around them. This is vital for many reasons, but the two most important are It allows us to create and define distinct areas of responsibility within the app, separate them out into smaller areas that can be better managed and maintained.

[00:36 - 00:50] And of course, it helps our users to get around our apps via a central navigation system and even bookmark favorite areas using friendly URLs, e.g. app.com/account/ profile. But what about navigation in the wild?

[00:51 - 01:07] 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. In Amazon's AWS console, whilst not built using React, it is for all intents and purposes a web application that looks and feels very similar to an SPA.

[01:08 - 01:27] It is a self-contained management application for administering various AWS services. However, the takeaway point here is that if we were to build this using a library like React, you can see how quickly it would become impossible to manage the codebase without some sort of navigation that allows us to break up the many areas of responsibility the different services offer.

[01:28 - 01:39] Another good example that is actually React based is the wonderful dev.2 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.

[01:40 - 01:53] Although browsing around the dev site might feel like you're using a regular website, you can see that there are many different areas to explore. Browsing the articles, reading individual articles, account management and profile editing, creating posts and articles and much more.

[01:54 - 02:08] Again, even though this is less complex in the AWS console, having all of this functionality crammed into a single page would be a nightmare for everyone involved, both users and those developers. P.S. just in case you'd like to farm me on dev, my profile is @Kendelman code.

[02:09 - 02:17] You can see how vital navigation is and how key-apart it plays in building any successful app. However, React doesn't provide us with any form of navigation out of the box.

[02:18 - 02:23] So what are our options? Essentially, when it comes to building out a navigation mechanism in your React app, you have two choices.

[02:24 - 02:37] You with a leverage the React component mounting system to swap out various components are imply a third-party bolt on the support your development. Let's look at the first option before we dive into third-party libraries which will be exploring throughout the rest of this module.

[02:38 - 02:49] So option one, mock-in navigation. For less complex apps or situations where you don't need a navigation structure , there is a robust means that React provides us built into the library from the get-go, the component mounting system.

[02:50 - 02:57] You've already seen this in action in previous modules, but essentially it would work like this. The app displays a default component, say, for the dashboard or homepage.

[02:58 - 03:09] When the user clicks a button on navigation link, we capture the name or ID value of the link in state. As the component re-renders state is referenced in the current name or ID values compared in, say, a switch statement.

[03:10 - 03:27] And when there is a match, a different component is rendered to the user. In practice, that could look like this. So we have our nav block with some anchor elements up top, and for each on- click handler we're performing a simple inline arrow function that updates the state value root to a particular string value that looks like a URL.

[03:28 - 03:37] Further down, we have a series of evaluation statements that compare the root value with a string for a match. If there is one, then the right-hand side of the expression is evaluated, which would output some JSX.

[03:38 - 03:49] So if we click on an anchor element with the /about string assigned to it, root will match this and display a heading level one element with the text about our app. There's a number of different ways to approach this, as with all things development.

[03:50 - 03:59] Instead of those repeated root evaluations, we could have used a function that runs a switch statement, which returns the correct JSX for us. Also, we're not limited to simple JSX, such as a H1 element.

[04:00 - 04:10] This could have been full-blown components, each having their own navigation elements within them, implemented in a similar way. But this could quickly become too complex to manage and make maintaining a software a challenge.

[04:11 - 04:18] Now I mentioned that the root value is set to what looks like a URL, because that's exactly the case. It's a string value at heart, not a URL.

[04:19 - 04:35] Sure, the display changes and the new information is loaded in, but the URL of our app won't change. In this example, there's no problem, and there might not be any problems in larger apps, but you do lose certain inherent features and behaviors that come with regular URL routing, features such as navigation history and URLs that can be bookmarked.

[04:36 - 04:47] That said, this is a useful means of basic navigation within an app and shouldn 't be discounted entirely. However, given the example apps we saw in the wild, you should be starting to see how this becomes an issue as the complexity of our apps grows.

[04:48 - 04:54] So what about other options? One of the best parts of front-end development is the sheer variety of choice we have at our feet.

[04:55 - 05:05] There are lots of options available to us, and in regards to react in its navigation, this is no different. In order to bolster React's car offering with some robust and easy to use navigation system, we're going to look at React Router.

[05:06 - 05:08] Let's head over to the next lesson and learn more about it.