Convert React Routes with a Dynamic Param to Programmatic Static Pages
Often in your plain React app you want to render the same component while passing a dynamic parameter in your URL to change the data. Examples of URL params can be IDs for products, users, books, etc...
When building such an app with plain React you will still need javascript to render these pages even though they don't change that much.
With Gatsby you can pull all the necessary data and build all these pages at build time to guarantee a faster page load time.
In this lesson, you will learn how to extract routes with dynamic parameters and convert them into Gatsby static pages programmatically
Instructor: [0:00] Now, let's migrate our Pokémons' section. Let's go back to our React app. If you see here when we click on Pokémons, we will see a list of Pokémons. For everyone, there's a specific page for it. This is a variable one, and it's depending on the data if we go to the code. You can see here. This is the data that's feeding these pages.
[0:26] We don't know exactly how many pages we'll have. We can't manually create these pages for them. What we can do is programmatically create static pages for that.
[0:38] First thing we need to create this Pokémon's page. To do that, let's go to our pages and create a new file, call it pokemons.js, and we will import React from 'react'. Let's have a pokemons constant here, which will be a function. Now that Pokémons page is created, let's add some navigation.
[1:14] If we go to the pokemons component, which is right here, you can see here we have My Pokémons. Let's copy this, and add it here. Here, I would have a div instead of the fragment. Let me get rid of case childrens right here. You can see here I'm looping through all the Pokémons and creating these li elements.
[1:44] Let's also get the data here, and paste it here. Do not forget we need to also export this component. That's it for this section right here.
[2:00] In our index, we have already a link to this Pokémons page. Let's check if we have any error. There is indeed one because in Pokémons here, we didn't import the link. Let's do that. If we stop the server and run it again.
[2:17] Let's switch to our Gatsby app. If we click on Pokémons, we can see here we have our Pokémons page. It's not similar to the React app, but we will go fix that in upcoming lessons.
[2:29] Then here, if we click in one of these individual Pokémons, we still don't have the pages. Let's fix that. Let's go to the gatsby-node. In here, we will export createPages function. Here, we will extract one param that we need, which is actions.
[2:46] Let me get createPage from actions. We need a template page for our Pokémon. Let's call it pokemonTemplate. For this one, it would be path.resolve. Here, this would be src/templates/pokemon.js. Let's save that, import, save that, and export require path. Before we continue here, we need to create the Pokémons template.
[3:18] Let's go up here. Let's have src that's creating a folder called a Templates. Here we will create a template called a pokemon.js. If we go to our page in the plain React app, let's look for the Pokémon. We can see here, this is the pokemon component. Let's import React from 'react'. Paste the code here.
[3:46] Taking a look, we don't need the Pokémon slug. However, we will need to get the name of the Pokémon. We will need the pageContext. Here, we don't need this. Instead of Pokémon, we will have pageContext.name. This is the template. Going back to our Gatsby-node, we need to get the list of Pokémons here and then put it here.
[4:13] We will look through all these Pokémons and create pages. What we can do is get Pokémons. For each, we will have a Pokémon, and then we will do something with it. Here, we will create a page. Page will have path, in this case, it will be pokemon.slug. We need a component, which will be the pokemonTemplate.
[4:39] Lastly, we need to pass some data to be able to display the name. Here, we will have name coming from pokemon.name. Let's hit Save and stop our server. Let's run it again. We need to navigate to our Gatsby app.
[4:54] First thing, we did a mistake here. We need to export the component. If we go to Pokémons and click one of these Pokémons right here, you can see here we can see an individual Pokémon.