The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Nested Routes

Next ►
►

In this section, we will explore nested routes in React using React Router. Nested routes allow you to render components within other components based on the URL path, enabling you to create complex and nested user interfaces.

Key Concepts

  1. Nested Routes: Routes that are defined within other routes, allowing for hierarchical navigation.
  2. Route Components: Components that are rendered when a specific route is matched.
  3. Switch Component: Used to group multiple Route components and render the first one that matches the current URL.

Setting Up Nested Routes

Step 1: Install React Router

If you haven't already installed React Router, you can do so using npm or yarn:

npm install react-router-dom

or

yarn add react-router-dom

Step 2: Basic Setup

First, let's set up a basic React Router configuration in our App.js file:

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

const Home = () => <h2>Home</h2>;
const About = () => <h2>About</h2>;

const App = () => (
  <Router>
    <div>
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/about">About</Link></li>
        </ul>
      </nav>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </div>
  </Router>
);

export default App;

Step 3: Adding Nested Routes

Now, let's add nested routes to the About component. We'll create two new components, Team and Company, and nest them under the About route.

const Team = () => <h3>Team</h3>;
const Company = () => <h3>Company</h3>;

const About = ({ match }) => (
  <div>
    <h2>About</h2>
    <ul>
      <li><Link to={`${match.url}/team`}>Team</Link></li>
      <li><Link to={`${match.url}/company`}>Company</Link></li>
    </ul>
    <Switch>
      <Route path={`${match.path}/team`} component={Team} />
      <Route path={`${match.path}/company`} component={Company} />
    </Switch>
  </div>
);

Step 4: Updating the App Component

Update the App component to include the nested routes:

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

const Home = () => <h2>Home</h2>;
const Team = () => <h3>Team</h3>;
const Company = () => <h3>Company</h3>;

const About = ({ match }) => (
  <div>
    <h2>About</h2>
    <ul>
      <li><Link to={`${match.url}/team`}>Team</Link></li>
      <li><Link to={`${match.url}/company`}>Company</Link></li>
    </ul>
    <Switch>
      <Route path={`${match.path}/team`} component={Team} />
      <Route path={`${match.path}/company`} component={Company} />
    </Switch>
  </div>
);

const App = () => (
  <Router>
    <div>
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/about">About</Link></li>
        </ul>
      </nav>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </div>
  </Router>
);

export default App;

Explanation

  • Link Component: Used to create navigation links. The to prop specifies the target URL.
  • Route Component: Defines a route and the component to render when the route is matched.
  • Switch Component: Renders the first child Route that matches the current URL.
  • match Object: Provided by React Router, it contains information about how a Route path matched the URL. We use match.url and match.path to create nested routes.

Practical Exercise

Task

  1. Create a new component called Services with nested routes for Web Development and App Development.
  2. Add navigation links for Services in the main navigation menu.
  3. Ensure that the nested routes render the appropriate components.

Solution

  1. Create the Services, WebDevelopment, and AppDevelopment components:
const WebDevelopment = () => <h3>Web Development</h3>;
const AppDevelopment = () => <h3>App Development</h3>;

const Services = ({ match }) => (
  <div>
    <h2>Services</h2>
    <ul>
      <li><Link to={`${match.url}/web-development`}>Web Development</Link></li>
      <li><Link to={`${match.url}/app-development`}>App Development</Link></li>
    </ul>
    <Switch>
      <Route path={`${match.path}/web-development`} component={WebDevelopment} />
      <Route path={`${match.path}/app-development`} component={AppDevelopment} />
    </Switch>
  </div>
);
  1. Update the App component to include the Services route:
import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

const Home = () => <h2>Home</h2>;
const Team = () => <h3>Team</h3>;
const Company = () => <h3>Company</h3>;
const WebDevelopment = () => <h3>Web Development</h3>;
const AppDevelopment = () => <h3>App Development</h3>;

const About = ({ match }) => (
  <div>
    <h2>About</h2>
    <ul>
      <li><Link to={`${match.url}/team`}>Team</Link></li>
      <li><Link to={`${match.url}/company`}>Company</Link></li>
    </ul>
    <Switch>
      <Route path={`${match.path}/team`} component={Team} />
      <Route path={`${match.path}/company`} component={Company} />
    </Switch>
  </div>
);

const Services = ({ match }) => (
  <div>
    <h2>Services</h2>
    <ul>
      <li><Link to={`${match.url}/web-development`}>Web Development</Link></li>
      <li><Link to={`${match.url}/app-development`}>App Development</Link></li>
    </ul>
    <Switch>
      <Route path={`${match.path}/web-development`} component={WebDevelopment} />
      <Route path={`${match.path}/app-development`} component={AppDevelopment} />
    </Switch>
  </div>
);

const App = () => (
  <Router>
    <div>
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/services">Services</Link></li>
        </ul>
      </nav>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
        <Route path="/services" component={Services} />
      </Switch>
    </div>
  </Router>
);

export default App;

Summary

In this section, we learned how to set up nested routes in React using React Router. We covered the following key points:

  • How to install and set up React Router.
  • How to create nested routes within a parent route.
  • How to use the match object to dynamically generate nested routes.

Nested routes are a powerful feature that allows you to create complex and hierarchical navigation structures in your React applications. In the next section, we will explore programmatic navigation in React Router.

◄ Previous
◄
Next ►
►

React Course

Module 1: Introduction to React

Module 2: React Components

Module 3: Working with Events

Module 4: Advanced Component Concepts

Module 5: React Hooks

Module 6: Routing in React

Module 7: State Management

Module 8: Performance Optimization

Module 9: Testing in React

Module 10: Advanced Topics

Module 11: Project: Building a Complete Application

The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved