Routing in React

Developed with
QA

The course is part of this learning path

ReactJS: Zero to Hero
course-steps
14
certification
5
lab-steps
3
description
1
play-arrow
An Introduction to Routing
Overview
DifficultyIntermediate
Duration22m
Students41

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

In this section, we're going to be looking at how we can add routing to our React app to make it into a single page application. To do this, we need to understand the roles of the router, route, switch, and link components that React Router provides. We also need to be able to define what happens when a user hits a particular route, and how we can link route parameters to actual data to display. So what is a single page application, and what options do we have providing routing for one? So far, the applications we have looked at on this learning path have all consisted of a discreet page that contains all of the components displayed at once. One view. Our users expect to be able to navigate through our app and select which view they would like to see, rather than to having to scroll down pages to find it. JavaScript apps need to maintain the data across many views, so requesting new pages from the server isn't an option. And it would slow our app down anyway. We want to take advantage of the virtual dong, and making as few changes to the actual dong as we can get away with so our app is fast and fluid. React Router, endorsed but not created by Facebook, is the standard routing library for React. Its documentation says, "React Router is a powerful routing library built on top of React that helps you add new screens and flows to your application incredibly quickly, all while keeping the URL in sync with what's being displayed on the page." Other frameworks and libraries like Angular use a concept called static routing. In static routing, all the routes for the app are declared as part of its initialization before it renders. This means that the application will know about every possible route it has before it's being shown. React Router followed this pattern until version four. Version four introduced dynamic routing. Now the routing takes place as the app is being rendered. To facilitate this, the part of the application that needs to be routed is wrapped in a router component. Child components define link components that links views to the route component's path. The route component has props which define which components to render when it's path prop has been hit. Routing is seen as part of UI and not static config. To keep pace with the one with hooks, React Router version five added it's own hooks to help with routing.

About the Author

Students1742
Labs8
Courses29
Learning paths5

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