This video is available to students only

Graphic details page

Making graphic list items clickable; and the editor(detail) route. In the process, we'll learn how to use React's Higher Order Components with Reagent.

With the graphics list in place, we will now build the details page for each graphic. The details page will include an editor component that will let us draw the actual graphic. In this chapter, we'll focus on the routing aspect and not concern ourselves with the actual editor.

Graphic Details Wireframe

Parsing route params#

React Router provides various mechanisms to parse route params (:graphicId in our case). There is a higher-order-component (HOC)-based approach using withRouter HOC, and a hooks-based approach using the useParams hook. We are going to use the withRouter HOC in our app.

The withRouter HOC expects a React component as an argument. One small issue - ratoms don't work with React! However ratoms do work as children of React components. The solution is to create a transparent wrapper to the desired Reagent component and pass in the props manually. Then reactify this wrapper component, so ratoms continue to work. Let's understand this with an example:

Now x-page-container is reactified and cannot use ratoms, however, its children can safely use ratoms.

Graphics page Switch#

The details for a graphic will be available at /graphics/:graphicId route. As per our app structure, the namespace responsible for this route is app.pages.graphics.detail.

We will also need an additional Switch component in app.pages.graphics since we need to compose routes as follows:

Route Structure

Let's update our app.pages.graphics namespace to accommodate this Switch:

  • we extracted the existing page component to list-component

  • replaced page with a Switch

  • when the route path is /graphics the list-component will be rendered

  • when the route path is /graphics/:graphicId, the graphics-detail-container will be reactified and rendered. It will also receive route properties courtesy of withRouter HOC.

  • graphics-detail-container internally renders the detail/page component, which we haven't created yet

  • the exact prop prevents the list component from being rendered on /graphics/:graphicId. It's how React Router composes.

The graphic-card component should redirect the user to /graphics/:graphicId when the card is clicked. We can achieve this by using React Router's Link component.

Let's update our card and wrap its content in a Link: