Building Dynamic Movie Detail Pages With React Router

Building Dynamic Movie Detail Pages With React Router

Movie detail pages use dynamic routing so one component handles any movie. Here is how to build them with React Router.

Define the Dynamic Route

Create a route like /movie/:id where :id is a parameter. The same detail component renders for any movie id.

Read the ID With useParams

Inside the detail component, use useParams to read the id. This id is what you pass to the movie API to fetch the right movie.

Fetch in useEffect

In useEffect with the id as a dependency, fetch the movie by id. Including the id as a dependency means the fetch re-runs when you navigate between movies.

Handle Loading and Error

Show a spinner while loading, an error message on failure, and the movie details on success. Always handle all three states so the page never looks broken.

Render the Details

Show the backdrop, title, overview, cast, genres, and a trailer if available. Render related movies at the bottom, fetched from the same or a different endpoint.

Navigate With Link or useNavigate

Use Link to navigate from a movie card to its detail page, building the URL with the movie id. For programmatic navigation, use useNavigate.

The Common Mistake

Forgetting to add the id to the useEffect dependency array, so navigating between two movies does not refetch and shows stale data. Always include the id.

The Takeaway

Dynamic movie pages use a /movie/:id route, useParams to read the id, a fetch in useEffect with the id as a dependency, full loading and error handling, and Link or useNavigate for navigation. Watch the dependency array.