In the last tutorial we have loaded articles when clicking a pagination button. If you would like to load articles even from a page parameter from URL, we need to implement a route. We will use the React Router to paginate through pages.
If you have not yet completed the previous tutorial, you can check it out here: https://www.ibenic.com/headless-wordpress-loading-posts-pagination/.
To start with the React Router, we need to install it. Once you have positioned yourself in the folder we have created in the previous tutorial (through the command line), type this command:
npm install react-router-dom
Once installed, let’s start editing and adding code. First, we will import components from the React Router at the begging of our
Adding Router to your App
We will now wrap our App JSX with Router so we can use Router components inside of our App. Be aware that once this code is added, you will get errors because of undefined components. We will define them next.
So, we have wrapped all our JSX with the
Router components and using the
Switch component so that Routes can be switched when the URLs are matched.
The first route that we have defined is
/page/:page. This will load the
ArticlePage component. We will then get the parameter
page to load the correct articles.
The second route will be used to load any article. The component Article will be shown for any URL that has anything in the path. The path will be considered as the item slug.
The last route is the default URL (home url) that will load the first page. We have also removed the
setCurrentPage being passed to the
Articles component because we will use the routes now.
The Article Component
We will define the article in the next tutorial, so for now, we will just add a component to render that route. Add this code outside of the component
With the property
currentPage we will be able to show the user the previous page.
In this component, the component
Link is used to change the Route (URL) on click.
Showing the Articles for a Page
Now we need to define the function/component
ArticlePage. Inside of that function we will call the
setCurrentPage to set the current page so that the
useEffect is triggered to load articles for the current page.
This function is defined inside of
App so we can have access to
setCurrentPage. Once the page is set, we render the
In the previous tutorial, we passed the
setCurrentPage to the
Articles component. This was used to set the page once clicked on the pagination button. Since now we are using the React Router, we don’t need that anymore.
Refactoring the Articles component
We will now refactor the
Now, when building the pagination, we are using the component
Link instead of a button. We are setting the route inside of the parameter
Another thing to do is to link articles. We are using the same component on the article title. This will link to the items slug thus making the URL structure that will load the
If you don’t want to edit the code or maybe don’t have the whole code from the previous tutorial, you can download the complete code here.
Once downloaded, make sure to run the command
npm install through the command line and set the URL to your blog or another WP powered site.
Using React Router, we can easily define URLs and what component to display. This can be used to create pages, posts and any other type of content with a few lines of code.
Have you ever used React Router? Were there any struggles with it? Let us know in the comments below.Become a Sponsor