Learn TypeScript 3 by Building Web Applications

Frontend – loading lyrics and redirecting to the lyrics page

Let's now handle the song selection event. When a user selects a song, we want to show the (yet to be completed) Lyrics page and have it render the lyrics.

To do this, there are many possible solutions. Typically, we would pass the song ID as a route parameter to the route and use it in the Lyrics page to fetch the lyrics. In our case, since we already have our GraphQL client configured, we will directly fetch the lyrics in the Home page and pass them along with the song through the route parameters.

The first thing to know is that since our Home page is rendered by react-router, it automatically receives several routing-related props. Let's start by making that more obvious.