Skip to main content

Basic Routing: `Routes`, `Route`, and `Link` (Part 2) - A Practical Example of Creating a Simple Navigation Menu #92

📖 Introduction​

Following our exploration of the core routing components, this article provides a practical, hands-on example of creating a simple navigation menu. We will learn how to use the <NavLink> component to create links that are aware of the current route, allowing us to style them differently when they are active.

📚 Prerequisites​

Before we begin, please ensure you have a solid grasp of the following concepts:

  • All concepts from Part 1 of this series.
  • Basic CSS.

🎯 Article Outline: What You'll Master​

In this article, you will learn:

  • ✅ The <NavLink> Component: How it differs from <Link> and why it's useful for navigation menus.
  • ✅ Active Link Styling: How to style active links using the active class.
  • ✅ Practical Application: Building a simple and stylish navigation menu.

🧠 Section 1: The Core Concepts of <NavLink>​

The <NavLink> component is a special version of the <Link> component that knows whether or not it is "active". This is incredibly useful for navigation menus, where you often want to highlight the link that corresponds to the current page.

By default, an active class is added to the <NavLink> component when it is active. You can then use this class to apply custom styles.

💻 Section 2: Deep Dive - Implementation and Walkthrough​

Let's build a simple navigation menu with active link styling.

2.1 - The Navbar Component​

First, let's create a new Navbar.js component.

// Navbar.js
import React from 'react';
import { NavLink } from 'react-router-dom';
import './Navbar.css';

function Navbar() {
  return (
    <nav>
      <ul>
        <li>
          <NavLink to="/">Home</NavLink>
        </li>
        <li>
          <NavLink to="/about">About</NavLink>
        </li>
        <li>
          <NavLink to="/contact">Contact</NavLink>
        </li>
      </ul>
    </nav>
  );
}

export default Navbar;

2.2 - Styling the Active Link​

Now, let's create a Navbar.css file to style our navigation menu and the active link.

/* Navbar.css */
nav ul {
  list-style: none;
  display: flex;
  gap: 1rem;
}

nav a {
  text-decoration: none;
  color: #333;
}

nav a.active {
  color: #007bff;
  font-weight: bold;
}

In this CSS, we are targeting the a tag with the active class and making it blue and bold.

2.3 - Integrating the Navbar into App.js​

Finally, let's add our Navbar component to our App.js file.

// App.js
import React from 'react';
import { Routes, Route } from 'react-router-dom';
import Navbar from './Navbar';
import Home from './Home';
import About from './About';
import Contact from './Contact';

function App() {
  return (
    <div>
      <Navbar />
      <hr />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </div>
  );
}

export default App;

Now, when you run your application, you will see a navigation menu where the active link is highlighted.

💡 Conclusion & Key Takeaways​

In this article, we've learned how to use the <NavLink> component to create a simple and stylish navigation menu with active link styling. This is a fundamental pattern that you will use in almost every React application you build.

Let's summarize the key takeaways:

  • The <NavLink> component is a special version of <Link> that is aware of the current route.
  • It automatically adds an active class to the link when it is active.
  • You can use this active class to apply custom styles to the active link.

Challenge Yourself: To solidify your understanding, try to change the active link styling to have a different background color instead of a different text color.

➡️ Next Steps​

You now have a solid understanding of how to create a basic navigation menu with React Router. In the next article, "Dynamic Routing with URL Parameters (Part 1)", we will explore how to create dynamic routes that can render different content based on the URL.

Thank you for your dedication. Stay curious, and happy coding!

glossary​

  • <NavLink>: A special version of the <Link> component that can be styled differently when it is active.
  • Active Link: A link in a navigation menu that corresponds to the current page.

Further Reading​