Art Museum Project: Phase 2

Art Museum, Phase 2: GalleryNavigation

Understand the Problem

In this phase, you will build a component named GalleryNavigation that renders links to all art galleries. It should show up on every page, and each link will route to a gallery detail view using React Router's NavLink. This is your first reusable component in the project!

Devise a Plan

  1. Create a components folder inside src
  2. Create a GalleryNavigation folder with a GalleryNavigation.jsx and optional index.js
  3. In GalleryNavigation.jsx, define and export a component that initially displays an h1 with the text "Galleries"
  4. Import and render GalleryNavigation from App.jsx at the /galleries route
  5. Pass harvardArt.records as a prop to the component
  6. Log or debug to verify galleries are passed in
  7. Map through galleries to render a NavLink to each gallery page
  8. Wrap h1 and links in a <nav> element

Carry Out the Plan

Create Components Folder

Create this structure:

src/
├── components/
│   └── GalleryNavigation/
│       ├── GalleryNavigation.jsx
│       └── index.js (optional)

GalleryNavigation.jsx

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

function GalleryNavigation({ galleries }) {
  return (
    <nav>
      <h1>Galleries</h1>
      <NavLink to="/">Home</NavLink>
      {galleries.map(gallery => (
        <NavLink key={gallery.id} to={`/galleries/${gallery.id}`}>
          {gallery.name}
        </NavLink>
      ))}
    </nav>
  );
}

export default GalleryNavigation;

index.js (optional)

import GalleryNavigation from './GalleryNavigation';
export default GalleryNavigation;

Update App.jsx

Inside your router array:

import GalleryNavigation from './components/GalleryNavigation';
import harvardArt from './data/harvardArt';

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

Test by visiting http://localhost:5173/galleries. You should see a nav bar listing the galleries and a Home link.

Look Back and Refactor

You now have a working GalleryNavigation component that dynamically lists galleries using props and maps them into NavLinks. In the next phase, you’ll make this appear on every route by introducing layout routes using Outlet.

Real-World Analogy

This is like the menu of a museum tour app — no matter where the user is exploring, they should always have access to jump between rooms (galleries). You’ll soon make that happen globally using a layout component.

Extra Resources