Nested Routes

Introduction

In this tutorial, we will explore how to create nested routes in a React application using React Router. Nested routes are a powerful feature that allows you to organize your components into a hierarchy, making it easier to manage complex applications.

Nested routes enable you to define child routes within parent routes, allowing for a more modular and reusable codebase. This is particularly useful when building applications with multiple levels of navigation or nested layouts.

Concept

In React Router, nested routes are created by defining routes inside other routes. The parent route acts as a container for its child routes. When a user navigates to a path that matches the parent route, both the parent and child components are rendered.

For example, consider an application with a dashboard layout that contains several sub-pages such as "Profile," "Settings," and "Messages." These sub-pages can be nested under the "Dashboard" route.

Examples

Let's walk through creating a simple React application with nested routes using React Router.

Step 1: Set Up Your Project

First, ensure you have Node.js and npm installed. Then, create a new React project using Vite:

npm create vite@latest nested-routes-example --template react
cd nested-routes-example

Next, install React Router by running:

npm install react-router-dom

Step 2: Create the Layout and Nested Components

Create a new file called Dashboard.js in the src directory. This component will act as the parent route for our nested routes.

1import React from 'react';
2import { Outlet } from 'react-router-dom';
3 
4const Dashboard = () => {
5return (
6  <div>
7    <h1>Dashboard</h1>
8    <nav>
9      <ul>
10        <li><a href="/dashboard/profile">Profile</a></li>
11        <li><a href="/dashboard/settings">Settings</a></li>
12        <li><a href="/dashboard/messages">Messages</a></li>
13      </ul>
14    </nav>
15    <Outlet />
16  </div>
17);
18};
19 
20export default Dashboard;

Now, create three more components for the nested routes: Profile.js, Settings.js, and Messages.js.

1// Profile.js
2import React from 'react';
3 
4const Profile = () => {
5return <h2>Profile</h2>;
6};
7 
8export default Profile;

1// Settings.js
2import React from 'react';
3 
4const Settings = () => {
5return <h2>Settings</h2>;
6};
7 
8export default Settings;

1// Messages.js
2import React from 'react';
3 
4const Messages = () => {
5return <h2>Messages</h2>;
6};
7 
8export default Messages;

Step 3: Set Up the Router

In your App.js file, set up the router to include the nested routes.

1import React from 'react';
2import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
3import Dashboard from './Dashboard';
4import Profile from './Profile';
5import Settings from './Settings';
6import Messages from './Messages';
7 
8const App = () => {
9return (
10  <Router>
11    <Routes>
12      <Route path="/dashboard" element={<Dashboard />}>
13        <Route path="profile" element={<Profile />} />
14        <Route path="settings" element={<Settings />} />
15        <Route path="messages" element={<Messages />} />
16      </Route>
17    </Routes>
18  </Router>
19);
20};
21 
22export default App;

Step 4: Run Your Application

Start your React application by running:

npm run dev

Open your browser and navigate to http://localhost:5173/dashboard. You should see the "Dashboard" component with links to "Profile," "Settings," and "Messages." Clicking on any of these links will render the corresponding nested component within the "Dashboard" layout.

What's Next?

In this tutorial, we learned how to create nested routes in a React application using React Router. In the next section, we will explore how to protect certain routes from unauthorized access by implementing authentication checks.

Stay tuned for more tutorials on advanced React topics!