Getting Started with React Router v6/

...

/

Add Index and Layout Routes

Add Index and Layout Routes

Add index, layout, and nested routes in a React application.

We'll cover the following...

In this lesson, we’ll cover how to implement the nested, index, and layout routes in our project.

Using nested routes

At present, our <Navbar /> component is rendering outside of the routes. We can use nested routes to give the parent component (the Wrapper / component, in this case) more control over its child components. Let’s open the file called Wrapper.js from the coding widget given in the exercise section and add the following code:

import React from 'react'
import { Outlet } from 'react-router-dom';
import Navbar from './Navbar';
const Wrapper = () => {
  return (
    <>
    <Navbar />
    <Outlet />
    </>
  )
}
export default Wrapper
Nested routes

Let’s review the code. For the Wrapper.js ...