Art Museum Project: Phase 3

Art Museum, Phase 3: NavLinks On Every Page

Understand the Problem

We need our GalleryNavigation component with all its links to show on every page, not just the /galleries route. We also want to apply visual feedback to show which route is active by using NavLink's .active class. The best solution is to create a shared layout that wraps all pages and renders GalleryNavigation globally.

Devise a Plan

  1. Create a Layout component that renders GalleryNavigation and an Outlet
  2. Use the layout as a wrapper route for all child routes
  3. Move existing routes inside the layout's children array
  4. Style active NavLinks by importing a CSS file and targeting .active

Carry Out the Plan

Define the Layout Component

Add this to the top of your App.jsx file:

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

function Layout() {
  return (
    <div className="page-wrapper">
      <GalleryNavigation galleries={harvardArt.records} />
      <main>
        <Outlet />
      </main>
    </div>
  );
}

Update the Router

Use the layout as a wrapper, and nest the homepage and 404 routes as children. Remove the /galleries route entirely.

const router = createBrowserRouter([
  {
    element: <Layout />,
    children: [
      {
        path: '/',
        element: (
          <>
            <h2>Harvard Art Museum</h2>
            <p>Look, but Don't Touch. Please select a Gallery in the navigation bar.</p>
          </>
        )
      },
      {
        path: '*',
        element: <h2>Page Not Found</h2>
      }
    ]
  }
]);

Now GalleryNavigation appears on every route!

Create CSS for Active Links

Create a new file: src/components/GalleryNavigation/GalleryNavigation.css

.active {
  font-weight: bold;
}

Then import it into GalleryNavigation.jsx:

import './GalleryNavigation.css';

Look Back and Refactor

You now have a centralized layout and consistent navigation across pages. Styling active links improves usability and reinforces routing behavior.

Real-World Analogy

Imagine a museum where every exhibit room includes the same map at the entrance. That map lets you jump to any other room, and the current one is highlighted. That's exactly what this layout and NavLink pattern accomplish.

Extra Resources