Route Information

Developed with
QA

The course is part of this learning path

ReactJS: Zero to Hero
course-steps
14
certification
7
lab-steps
3
description
1
play-arrow
Start course
Overview
DifficultyIntermediate
Duration22m
Students98

Description

This module looks at how to Route in React. You’ll be looking at linking components, creating dynamic links, parameterized routes, and how to install the React Router DOM.

Learning Objectives 

The objectives of this module are to provide you with an understanding of: 

  • How to install the React Router DOM 
  • Hooks in React  
  • How to create restful services  
  • How to use an Effect Dependency Array  
  • How to hand errors in data requests  
  • How to send data   

Intended Audience  

This learning path is aimed at all who wish to learn how to use the ReactJS framework.  

Prerequisites

It is essential you understand the face of contemporary web development to attend this course. You should also have JavaScript experience, along with good HTML and CSS skills.

Feedback 

We welcome all feedback and suggestions - please contact us at qa.elearningadmin@qa.com to let us know what you think. 

Transcript

If we examine the React DevTools components app now we've added routing, we can see that there is a hierarchy of our components mixed with extra components like Router.Provider, Router.Consumer, and LinkAnchor. Using React Router Dom's components has added these for its functionality. If we locate the Course component, the one highlighted, we can look at the data that's been passed along to this component. We don't need to look at props as we already know where they would come from. You should also be pretty comfortable by now with why there might be State and Effect hooks displayed in the hooks section. What you're probably wondering is, "Where's the Params hook come from?" We'll talk about this hook in more detail later, but what is interesting at the moment is the data that it gives us access to. There's a Context object here, and that has sub-objects of history, location, match, and staticContext. These objects contain information about the route. The history object has information for the history stack pushing it to it with the pathname that the route generated. Some similar data is stored in the location object. The staticContext object is not defined. We're not using static routing, so that makes some sense. The match object is the one we're interested in as it contains the information we need to match the route to the location. As we've learned, routing is all about matching a location's pathname to the path URL actually hit. The second part of this information is contained in the match object. You'll notice that the path and the URL are slightly different. The path is what we have told React the route will be, and the URL is the one it actually rendered. If you haven't worked it out yet, the :id in the path is there to represent the id of the course we click on. Any part of a path defined in a Route component that starts with a colon is recognized as a parameter on the route. This gets stored in the params object. The text after the colon becomes the key, and the value is whatever's supplied. If we change the Course, we change the id, the display updates, and the match values update in the Context object to reflect this too. You can see that courses/1 is now the location, and the URL is courses/1, and the params id is courses/1. That's because Web Development Fundamentals JavaScript has an id of one.

About the Author
Students2953
Labs8
Courses29
Learning paths6

An outstanding trainer in software development with more than 15 years experience as a Corporate and Apprentice Trainer, ICT Teacher and Head of Department, with a passion for technology and its uses. Continuing to develop existing and new skills and courses, primarily in web design using PHP, JavaScript, HTML, CSS and SQL but also OOP (Java), programming foundations (Using Python), DevOps (Git, CI/CD, etc) and Agile/Scrum. Practically minded, a quick learner and a problem solver with an attention to detail to ensure high quality outcomes.

Covered Topics