React Js Nested Routes using React Router DOM 6 Tutorial
Tags: react, abotwrotethis
Published: 2023-04-05 17:02:03

Are you looking to learn about implementing nested routes in your React Js app using React Router DOM 6? You have come to the right place! In this tutorial, we will guide you through the process of creating nested routes in React.

Before we dive into nested routes, let’s get a brief understanding about React and React Router.

## What is React?

React is a JavaScript library for building user interfaces. With React, you can create reusable UI components that combine to build complex UIs. React was developed by Facebook and is used extensively for building web and mobile applications.

## What is React Router?

React Router is a third-party library used for handling client-side routing in React apps. It provides a simple and declarative way to handle routing of your application’s URLs. With React Router, you can define routes based on the URL path and render different components based on the current route.

Now that we have a basic understanding of React and React Router, let’s move on to nested routes.

## What are Nested Routes?

Nested routes are routes within routes. By using nested routes, you can break down a complex URL into smaller, manageable parts. This enables you to manage the application state more effectively and helps in organizing your code.

For instance, consider a scenario where you want to create a dashboard page for a user. The dashboard contains several components such as “Profile,” “Settings,” and “Logout,” each component has its own sub-components that require nesting. By using nested routes, we can manage this complex URL structure in a more organized way.

To implement nested routes in React, we will be using React Router DOM 6.

## Steps for Implementing Nested Routes using React Router DOM 6

Here are the steps to implement nested routes using React Router DOM 6:

### Step 1: Install React Router DOM 6

First, we need to install React Router DOM 6 using npm. Open your terminal and type the following command:

```
npm install react-router-dom@next
```

### Step 2: Create a Layout Component

Next, let’s create a Layout component for our nested routes. This component will contain the common layout for all the routes.

```jsx
const Layout = ({ children }) => (
  <div>
    <header>Header</header>
    <nav>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/dashboard">Dashboard</Link></li>
      </ul>
    </nav>
    <main>{children}</main>
    <footer>Footer</footer>
  </div>
);
```

Here, we have created a functional component called Layout that contains a header, navigation, main content area, and a footer. The header and footer will remain the same across all our routes, while the navigation and main content area will change based on the current route.

### Step 3: Create Route Components

Next, let’s create components for each of our routes. In this tutorial, we are going to create three routes - one for the home page, one for the about page, and one for the dashboard page.

```jsx
const Home = () => <h1>Welcome to the Home page</h1>;

const About = () => <h1>Welcome to the About page</h1>;

const Dashboard = () => (
  <div>
    <h1>Welcome to the Dashboard page</h1>
    <nav>
      <ul>
        <li><Link to="/dashboard/profile">Profile</Link></li>
        <li><Link to="/dashboard/settings">Settings</Link></li>
        <li><Link to="/dashboard/logout">Logout</Link></li>
      </ul>
    </nav>
  </div>
);
```

Here we have created three components - Home, About, and Dashboard. The Home and About components are simple components that will display the page title.

The Dashboard component is a bit more complex. This component contains a navigation menu and will render different sub-components based on the current route.

### Step 4: Create Nested Routes

Now that we have our layout and components set up, let’s create our nested routes. In this example, we will create nested routes for the sub-components of the Dashboard component - Profile, Settings, and Logout.

```jsx
const Profile = () => <h2>Profile Component</h2>;

const Settings = () => <h2>Settings Component</h2>;

const Logout = () => <h2>Logout Component</h2>;

const DashboardRoutes = () => (
  <Switch>
    <Route path="/dashboard/profile" component={Profile} />
    <Route path="/dashboard/settings" component={Settings} />
    <Route path="/dashboard/logout" component={Logout} />
  </Switch>
);
```

Here, we have created three components - Profile, Settings, and Logout. We have also created a component called DashboardRoutes, which will render the nested routes.

The Route component in React Router can accept a component as a prop, which will be the component to render if the current URL matches the specified path. In this case, we have created three different Route components for each sub-component of the Dashboard component.

### Step 5: Define Route Paths

Finally, we need to define the paths for our routes. To do this, we need to use the Route component and pass the path prop.

```jsx
const App = () => (
  <Router>
    <Layout>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/dashboard" component={Dashboard} />
      </Switch>
      <DashboardRoutes />
    </Layout>
  </Router>
);
```

Here, we have defined the path to the components using the Route component. We have also wrapped our routes inside a Switch component, which will ensure that only one route is rendered at a time.

## Conclusion

Congratulations! You have successfully implemented nested routes in your React app using React Router DOM 6. Nested routes help in managing complex URL structures by breaking them down into smaller parts. By using React Router, we can easily create and manage these nested routes within our app.

Feel free to experiment with nested routes and explore other features of React Router. Don’t forget to share your thoughts or suggestions in the comments below. Happy coding!