Route Components

Developed with

The course is part of this learning path

ReactJS: Zero to Hero
Start course


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.  


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.


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


Now that we have the navigation links in the app, we want the few sites they change when we click on them, that's the job with the route component. The route component is from the react-router-dom library, and it's used to define which component tree should be rendered when a particular location matches the route path. This component is one of the most important to understand, if you want to add route into your app. It can receive some props when it's used. These are paths, a render method and some other options. The path isn't anything more than the part of the URL we want this route to work with. Usually, you'll define a route component for every two attribute you use in your application. The path is defined as a string, or an array of strings. The easiest and recommended way to render from a route is to add child components to it. However, there are three other ways to render from a route. These are considered legacy, as they were the way to render on routes before hooks were introduced. You can supply a components tribute with the name of the component to render in curly braces. You can use the render attribute, this requires a callback that returns a component, or you can use the children attribute which is useful in animations, as you can render on this route whether the path matches the location or not. The options that can be supplied make the route more specific. Using exact means that the route will only match if the path supplied matches location path name exactly. Adding strict means that paths with a trailing slash included will only match a locations path name that has a trailing slash. Strict has no effect if there are additional URL segments in the locations path name. Supplying the location prop needs its value to be an object. When matching a route, it uses the current history location and the path supplied. The location prop allows for a location with a different path name to be matched. As with the children render method, this is useful in animations. The final option in the API for route is sensitive. When used, it defines that the path and the location path name must be a case match as well.

About the Author
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