Welcome back! So far, you have learned how to fetch, sort, and paginate a list of books in your catalog app. In this lesson, you will take the next step by building a Book Details Page. This page allows users to click on a book in the catalog and see more information about it, such as the title, author, and some interesting statistics.

A details page is a key part of any data catalog. It helps users dive deeper into a specific item and learn more about it. By the end of this lesson, you will know how to fetch and display detailed information for a single book and how to connect your catalog to this new page.

Let’s start by declaring a dynamic route so the app can open a details page for any book. A dynamic segment (:id) captures the book identifier directly from the URL (e.g., /books/2).

Here’s how your routing is set up in src/routes/router.tsx:

Why this matters

• books/:id tells React Router to match any id and pass it to the page via useParams().
• Navigating to /books/2 renders BookDetailsPage with { id: "2" }.
• Keeping details under /books/... keeps URLs predictable and deep-linkable from the catalog.

We’ll consume two public endpoints your backend already exposes:

These two endpoints give us entity data (title/author/etc.) and derived metrics (how folks are progressing). We’ll fetch them in parallel and render the combined view.

To show detailed information about a book, you need to fetch it from the API using its ID. You will also fetch some statistics about the book, like how many users have it on their shelf and the average reading progress.

Here are the two functions you will use, found in src/api/books.ts:

What this does

• getBookById(id) → GET /books/:id, returns the Book object. If the server returns 404, React Query will surface an error you can handle in the UI.
• getBookStats(id) → GET /books/:id/stats, returns aggregates:
  • readers: number of users tracking this book.
  • avgCurrentPage: average page currently reached.
  • completionRate: fraction of readers who finished (0..1).
  • avgProgressPct: average progress (0..1). Multiply by 100 for a percentage.

Now, let’s put it all together in the BookDetailsPage component. This component will:

• Get the book ID from the URL,
• Fetch the book’s details and stats,
• Show a loading spinner while data is loading,
• Display the book’s information and statistics.

Here is the code for src/features/book/BookDetailsPage.tsx:

Key ideas

• useParams() provides { id } from the dynamic route.
• Two independent queries:
  • ["book", id] fetches the primary entity.
  • ["bookStats", id] fetches aggregates. They run in parallel and revalidate independently.
• guards against running queries before the router provides an id.

Finally, ensure cards in the catalog link to the details page. This makes discovery natural: click a card → land on /books/:id. To let users open the Book Details Page, you need to link each book in the catalog to its details page. This is done in the BookCard component using React Router’s Link.

Here’s the code from src/features/catalog/BookCard.tsx:

Why this is effective

• The Link composes a semantic, accessible navigation target.
• Deep-linking: You can share /books/2 directly and the details screen loads the correct content.

In this lesson, you learned how to build a Book Details Page that shows more information about a single book. You reviewed how dynamic routing works, how to fetch a book’s details and stats from the API, and how to display this information in a user-friendly way. You also saw how to link from the catalog to the details page so users can explore books in more depth.

Next, you’ll get a chance to practice these skills by building and using the Book Details Page yourself. This hands-on practice will help you reinforce what you’ve learned and prepare you for even more advanced features in the future. Good luck!