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.
Graphic details page#
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.
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.
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:
x-page-container is reactified and cannot use ratoms, however, its children can safely use ratoms.
The details for a graphic will be available at
/graphics/:graphicId route. As per our app structure, the namespace responsible for this route is
We will also need an additional
Switch component in
app.pages.graphics since we need to compose routes as follows:
Let's update our
app.pages.graphics namespace to accommodate this
we extracted the existing
when the route
list-componentwill be rendered
when the route
graphics-detail-containerwill be reactified and rendered. It will also receive route properties courtesy of
graphics-detail-containerinternally renders the
detail/pagecomponent, which we haven't created yet
exactprop prevents the
listcomponent from being rendered on
/graphics/:graphicId. It's how React Router composes.
Link graphic card#
graphic-card component should redirect the user to
/graphics/:graphicId when the card is clicked. We can achieve this by using React Router's
Let's update our card and wrap its content in a