Art Museum Project: Phase 4

Art Museum, Phase 4: GalleryView

Understand the Problem

Now it’s time to build the page that displays information for a specific art gallery. You’ll create a GalleryView component to render the /galleries/:galleryId route. This component will use useParams to access the URL parameter and display the matching gallery’s details.

Devise a Plan

  1. Create a GalleryView folder with a GalleryView.jsx file
  2. Create a basic component that displays a placeholder <h1> and export it
  3. Add a route to /galleries/:galleryId in App.jsx
  4. Use useParams to get the galleryId from the route
  5. Pass the galleries prop into GalleryView
  6. Find the matching gallery using Array.find
  7. Render the gallery name if found, or <Navigate /> to home if not

Carry Out the Plan

Create the Component

// src/components/GalleryView/GalleryView.jsx
import { useParams, Navigate } from 'react-router-dom';

function GalleryView({ galleries }) {
  const { galleryId } = useParams();
  const gallery = galleries.find(g => g.id === Number(galleryId));

  if (!gallery) return <Navigate to="/" />;

  return <h2>{gallery.name}</h2>;
}

export default GalleryView;

Optional index.js

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

Update App.jsx

Import GalleryView and add the route under your layout’s children:

import GalleryView from './components/GalleryView';

{
  path: 'galleries/:galleryId',
  element: <GalleryView galleries={harvardArt.records} />
}

Look Back and Refactor

You now have a dynamic detail view for each art gallery. The route path handles matching, and useParams handles retrieval. You also included a fallback redirect with <Navigate /> for invalid routes — nice and user-friendly!

Real-World Analogy

Just like choosing a room from a museum map and walking in to see its exhibits, the URL tells the app which gallery to open. If the room doesn’t exist, you’re taken back to the main entrance — the homepage.

Extra Resources