Phase 2: Navigation

Understand the Problem

We want to provide users a way to move between pages using navigation links. These links should be visible on all pages and clearly indicate which page is currently active. We'll use NavLink from react-router-dom to style active links and route the user correctly.

Devise a Plan

1. Create a new Navigation component
2. Use NavLink elements for each route
3. Ensure this component is always visible by rendering it in App.jsx above all routes
4. Verify that the navigation bar works and highlights the active route

Carry Out the Plan

File: src/Navigation.jsx

// Pseudocode:
// 1. Import NavLink from react-router-dom
// 2. Return a <nav> element containing NavLinks to each route
// 3. Use descriptive text for each navigation item

import { NavLink } from 'react-router-dom';

function Navigation() {
  return (
    <nav>
      <NavLink to="/">Home</NavLink>
      <NavLink to="/fruits/new">Enter a Fruit</NavLink>
      <NavLink to="/fav-fruit">Favorite Fruit</NavLink>
      <NavLink to="/set-fav-fruit">Set Favorite Fruit</NavLink>
    </nav>
  );
}

export default Navigation;

Expected Input and Output

• Input: User clicks on “Favorite Fruit”
• Output: Browser navigates to /fav-fruit and highlights the link
• Input: User lands on the page /
• Output: “Home” is active and shows the Fruits Index

Explanation for New Developers

NavLink works just like an anchor tag (<a>), but it also knows when it's the active link and can automatically apply styling for it. This helps users know where they are in the app.

The <nav> element groups our links and helps with accessibility and semantic layout.

Real World Analogy

Imagine your app is like a multi-room gallery. The navigation is the map on the wall — it not only shows where the rooms are but also highlights which room you're currently standing in.

Bonus Tip

You can customize the style of active links with the className or style prop using a callback in NavLink to enhance user experience even more.