Skip to content
Related Articles

Related Articles

Implement Nested Routes in React.js – React Router DOM V6

View Discussion
Improve Article
Save Article
Like Article
  • Last Updated : 04 Mar, 2022

In this article, we will be building a simple React.js application to implement nested routing in the current version of react-router that is React Router DOM version 6. We use nested routing in our application so that a parent component has control over its child component at the route level.   

Prerequisites: The pre-requisites for this project are:

Creating a React application:

Step 1: Create a React application by typing the following command in the terminal:

npx create-react-app nesting-demo

Step 2: Now, go to the project folder i.e nesting-demo by running the following command:

cd nesting-demo

Project Structure: It will look like this:

Step 3: Let’s install the React Router DOM npm package required for this project:

npm install react-router-dom

Example: In this file, we will be implementing the routing logic. Previously in the React Router DOM V5, we used to have <switch> element but we won’t be using that now. One of the features of React Router DOM V6 is that it now comes with a <Routes> element. This is an upgrade as it comes with features like relative routing and linking, automatic route ranking, and nested routes and layouts. In our app, we will have two routes, one for the Home page and another for the Courses page. Under the Courses page, we will have again two routes, one for the Search component and the other for the List component. Thus we need to implement nested routing in the Courses page in order to render the selected component.

App.js




import {BrowserRouter as Router, Link, 
  Routes, Route} from 'react-router-dom'
import './App.css';
import Home from './Pages/Home';
import Courses from './Pages/Courses';
import Search from './Components/Search';
import List from './Components/List';
  
function App() {
  return (
    <div className="App">
      <Router>
        <nav>
          <Link to="/">Home</Link>
          <Link to="courses">Courses</Link>
        </nav>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/courses" element={<Courses />}>
            <Route path="search" element={<Search />} />
            <Route path="list" element={<List/>}/>
          </Route>
        </Routes>
     </Router>
    </div>
  );
}
  
export default App;

We put the paths named ‘search’ & ‘list’ under the ‘courses’ path, so the URL will localhost:3000/courses/search and localhost:3000/courses/path respectively.

Let’s create the Search and List component. Create a folder named Components and under that create two files ‘Search.js’ and ‘List.js’.

Search.js




import React from 'react'
  
const Search = () => {
  return (
    <div className='Search'>
      <h2>You are inside the Search Component</h2>
      <h4>URL: localhost:3000/courses/search</h4>
    </div>
  )
}
  
export default Search

List.js




import React from 'react'
  
const List = () => {
  return (
    <div className='List'>
      <h2>You are inside the List Component</h2>
      <h4>URL: localhost:3000/courses/list</h4>
    </div>
  )
}
  
export default List

Now let’s create the two pages required for this app. Create a folder named Pages and under that create two pages named ‘Home.js’ and ‘Courses.js’.

Home.js




import React from 'react'
  
const Home = () => {
  return (
    <div className="Page">
      <h1>You are in the Home page!</h1>
      <h3>URL: localhost:3000/</h3>
    </div>
  )
}
  
export default Home

Filename Courses.js: In this file, we will be using the new <Outlet> element to render two child components named ‘Search’ and ‘List’.

Courses.js




import React from 'react'
import { Link, Outlet } from 'react-router-dom'
  
const Courses = () => {
  return (
    <div className="Page">
      <h1>You are in the Courses page!</h1>
      <h3>URL: localhost:3000/courses</h3>
      <div className="courses-nav">
        <Link to="/courses/search">Search</Link>
        <Link to="/courses/list">List</Link>
      </div>
      <Outlet />
    </div>
  )
}
  
export default Courses

We used an <Outlet> element as a placeholder. An <Outlet>, in this case, is how the Courses component renders its child routes. So the <Outlet> will render either a Search component or List component depending on the current location.

App.CSS




/* Styling for the App component nav element 
and Course component course-nav div */
.App nav, .courses-nav{
  background: #f2f2f2;
  height: 4vh;
  min-width: 600px;
  border-radius: 10px;
  text-align: center;
  border-bottom: 2px solid #2f8d46;
}
  
/* Styling for App component nav element anchor 
tag and Course component nav element anchor tag */
.App nav a, .courses-nav a{
  padding: 20px 20px;
  font-size: 26px;
  font-weight: bold;
  text-transform: uppercase;
  text-decoration: none;
  color: #2f8d46;
}
  
/* Styling for Course component 
course-nav div anchor tag */
.courses-nav a{
  color: rgb(59, 117, 241);
}
  
/* Styling for the Home component main div */
.Page{
  width: 100%;
  height: 96vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  background-color: lightgreen;
}
  
/* Styling for the Search & List component main div */
.Search, .List{
  width: 50%;
  height: 40%;
  padding: 100px;
  background-color: whitesmoke;
}

React Router DOM V6 comes with more features apart from simplified nested routing, you can check it out here at its official documentation.

Step to Run Application: Run the application using the following command from the root directory of the project.

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!