Art Museum Project

Art Museum, Bonuses

Understand the Problem

You’ve built a robust React app using route objects. Now, let’s explore how to define routes using JSX elements instead. You’ll also enhance the experience with custom styling using CSS.

Devise a Plan

Duplicate App.jsx into a new file AppBonus.jsx
Switch route object definitions to nested Route JSX
Use createRoutesFromElements and update your router configuration
Update main.jsx to use AppBonus.jsx
Style the app using CSS for layout, links, galleries, and image views

Carry Out the Plan

Convert Routes to JSX

// src/AppBonus.jsx
import {
  createBrowserRouter,
  createRoutesFromElements,
  Route
} from 'react-router-dom';
import Layout from './components/Layout';
import GalleryView from './components/GalleryView';
import ArtDescription from './components/ArtDescription';
import PageMissing from './components/PageMissing';
import harvardArt from './data/harvardArt';

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route element={<Layout />} errorElement={<PageMissing />}>
      <Route index element={
        <>
          <h2>Harvard Art Museum</h2>
          <p>Look, but Don't Touch. Please select a Gallery in the navigation bar.</p>
        </>
      } />
      <Route path="galleries/:galleryId" errorElement={<PageMissing />}>
        <Route index element={<GalleryView galleries={harvardArt.records} />} />
        <Route path="art/:artId" element={<ArtDescription galleries={harvardArt.records} />} />
        <Route path="*" element={<PageMissing />} />
      </Route>
      <Route path="*" element={<PageMissing />} />
    </Route>
  )
);

function App() {
  return <RouterProvider router={router} />;
}

export default App;

Switch Entry Point

// src/main.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './AppBonus';
import './index.css';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Add CSS Styling

Use CSS to style your nav, art tiles, hover states, gallery layout, and detail views
Apply responsive grid layout to .art-grid
Highlight active links using the .active class
Add margins and spacing to improve readability

Look Back and Refactor

You now know two approaches to routing: object-based and JSX-based. Both are valid, and understanding both increases your flexibility. You’ve also added visual polish with CSS — a critical skill in frontend development.

Real-World Analogy

Switching route formats is like building a museum with blueprints (object routes) vs. assembling rooms directly (JSX). Both get you a stunning gallery — it's just a matter of preference and readability.