From the course: Build Modern Web Apps with React, Hooks, State Management, and APIs Using Vite or Next.js

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

Nested routes: Introduction

Nested routes: Introduction

Hello and welcome back. Welcome to lesson number 3. In this lesson, we are going to learn about the nested routes and the outlet component. So, what are nested routes? They allow us to create nested UI layouts where a child component renders inside a parent component. This is useful for dashboards or user profiles or any other layout that does not have to change, while the other parts can change. Consider this as you have a parent layout such as the navbar. Once you log in into any application, then the navbar is not going to change. But the content that you are seeing inside the container, it can get changed based on whatever option or whatever route we are going to click. We can define nested routes in a following way. The child routes are defined within a route of a parent component. The parent component is going to have a path which is going to act as a prefix for all its children. Consider this code, we are going to implement something similar like this. So over here, you have a…

Contents